Dynamic text overflow for mobile phones

Question

How do I get text-overflow to dynamically adjust when a mobile phone's orientation changes? This is how it should look:

Portrait mode

[] This is a very long ... |
[] Super long title is ... |
[] Hello                   |
[] Lorem ipsum             |

Landscape mode

[] This is a very long title, right?    |
[] Super long title is so long that ... |
[] Hello                                |
[] Lorem ipsum                          |

I've only been able to successfully see the ellipsis when text-overflow is applied to the immediate element, and this element has a hardcoded width . Now you see the problem: since mobile phones have a dynamic width based off of their orientation, this won't work. If you hardcode the width to make it look right in portrait mode, for example, it won't take advantage of the extra space in landscape mode. I already know a Javascript solution, but I wanted to see if anyone knew a clean CSS solution.

HTML

<ol>
 <li>
  <img src="foo.jpg" />
  <p>This is a ver long title, right</p>
 </li>
 <li>
  <img src="bar.jpg" />
  <p>Super long title is so long that it can't fit</p>
 </li>
</ol>

CSS

li {
}

 li img {
  float: left;
  width: 4em;
  height: 4em;
 }

 li p {
  margin: 0 0 0 5em;
  white-space: nowrap;
  width: 16em;
  text-overflow: ellipsis;
 }

Answer 1

How about controlling the width for the ol ?

CSS:

ol { 
    width: 100%;
}

li img {
    float: left;
    width: 4em;
    height: 4em;
}

li p {
    margin: 0 0 0 5em;
    white-space: nowrap;
    /* width: 16em; */
    text-overflow: ellipsis;
    overflow: hidden;
}

.clear {
    clear: both;
}

HTML:

<ol>
    <li>
        <img src="http://www.codefromjames.com/dogquiz/images/dog.png" />
        <p>This is a ver long title, right</p>
        <div class="clear"></div>
    </li>
    <li>
        <img src="http://www.codefromjames.com/dogquiz/images/dog.png" />
        <p>Super long title is so long that it can't fit. 
        Super long title is so long that it can't fit.  </p>
        <div class="clear"></div>
    </li>
</ol>

Here's a jsfidder demo for this, note that I added an extra <div> at the end of each <li> with clear:both style: http://jsfiddle.net/akuXJ/1/

Answer 2

What if you instead did width: 90%?

Answer 3

Add overflow: hidden to the list items, see this demo fiddle .

HTML:

<ol>
    <li>      
        <img src="foo.jpg" />This is a ver long title, right
    </li>
    <li>        
        <img src="bar.jpg" />Super long title is so long that it can't fit
    </li>
</ol>

CSS:

li img {
    width: 4em;
    height: 4em;
    vertical-align: middle;
}
li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    vertical-align: middle;
}

Or, with the images within paragraph's .
Or, with the images outside paragraph's .

Answer 4

Have you tried display table? If it's supported by the device, it might have the effect of assigning a width to the text by treating it as a table cell.

Something like...

ol { display: table; width:100%; }
li { display: table-row; }
li img { display: table-cell; width: 4em; height: 4em; }
li p { display: table-cell; padding-left:5em; white-space: nowrap; text-overflow: ellipsis; }

If that doesn't work, another option might be display: inline-block