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应用于immediate元素时成功查看省略号，并且此元素具有硬编码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/

Answer 2

如果您改为宽度：90％？

Answer 3

将overflow: hidden添加到列表项，请参阅 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;
}

或者images within paragraph's。
或者，使用images outside paragraph's。

Answer 4

你试过显示表吗？如果设备支持它，则可能会通过将其视为表格单元格来为文本指定宽度。

像...一样的东西。

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; }

如果这不起作用，则另一个选项可能是display: inline-block

移动电话的动态文本溢出

4 个答案: