Question 213233 in Html Question posted in
Some basic documentation can be found here.

Html – <br> that disappears if text has line break (without using white-space: nowrap)

I am trying to make a table that works on many mobile devices. It is imperative that all <tr>s are of equal height & fairly compact. Some text in various <td>s might flow onto a second line, but most of the time that doesn’t happen.

<tr>
    <td class="col1">5</td>
    <td class="col2">
        <b>Some Data that can be very long</b>
        <br> 
        <br> 
        <div class="special1">
             More data
        </div>
    </td>
</tr>

When the long line has to break into 2 lines, I would like one of my <br>s (or a comparable spacing solution) to disappear. Is there any way to do this? Maybe with a margin & max-height combo?

Edit: Can’t believe I forgot to say this, but I can’t use the white-space property. On iOS the usage of this property results in table cell borders that don’t collapse and end up having various thicknesses. For example column one shows as the normal 1px thickness I want, but col2 is at least 2px thick. So I am looking for an alternative method to control the height of each table row.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I resolved this issue by adding a class to the "very long" data block:

    CSS:

    fixed-height {
    display: block;
    height: 2ex;
}

    HTML:

    <tr>
    <td class="col1">5</td>
    <td class="col2">
        <b class="fixed-height">Some Data that can be very long</b>
        <br> 
        <br> 
        <div class="special1">
             More data
        </div>
    </td>
</tr>

    Thus it always takes up an extra line and will fill the second line as needed.

    Learn more about the ex unit


  2. 0

    One solution to this problem could be to use the CSS property "line-height" to ensure that all rows have equal height.

    You can also use the "white-space" property to control how text wraps within cells.

    To make sure that line breaks disappear when text wraps onto a second line, you can use the "display" property and set it to "inline-block" for the table cells.

    I recommend you use white-space css property.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search