iphone - 手机动态文字溢出

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 解决方案。

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

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

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