手机动态文本溢出

Question

如何让文本溢出在手机方向变化时动态调整？它应该是这样的：

人像模式

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

横向模式

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

text-overflow我只能在应用于直接元素时成功看到省略号，并且该元素具有硬编码的width. 现在您看到了问题：由于移动电话具有基于其方向的动态宽度，因此这是行不通的。例如，如果您对宽度进行硬编码以使其在纵向模式下看起来正确，则它将无法利用横向模式下的额外空间。我已经知道一个 Javascript 解决方案，但我想看看是否有人知道一个干净的 CSS 解决方案。

超文本标记语言

<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

如何控制 的宽度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>

这是一个 jsfiddle 演示，请注意，我在每个样式<div>的末尾添加了一个额外的内容： http: //jsfiddle.net/akuXJ/1/<li>clear:both