Question

我的页面显示一组新闻项目，每个新闻项目都有一个标题。标题可以是可变数量的单词，但我希望它们总是在两行上尽可能保持平衡宽度。例如：

Announcing Bosun, our new open
source monitoring & alerting system

Stack Exchange for
the iPad is here

A
headline

显然我可以在正确的断点处放入一个<br>元素，我甚至可以尝试自动计算它的位置，但是有没有CSS会为我做这个？让它在响应式布局中工作会很好。我并不特别关心浏览器兼容性，所以也可以接受参考即将推出的实现我想要的规格的答案。

Answer 1

因此目前无法在CSS中执行此操作，但CSS4 Text刚刚在草案规范中添加了text-wrap: balance，这正是我的问题所要求的。我将把这作为支持这一辉煌未来的答案。

http://dev.w3.org/csswg/css-text-4/#text-wrap

Answer 2

这应该有效：

div {   
    overflow: hidden;
    max-width: 165px; // define max width of the text
    height: 30px;     // define height of the text based on font size and line height
    line-height: 1.4;
    font-size: 11px;    
}

另外，为了让它变得有趣，你可以尝试在底线的末尾添加省略号（...）：

div {   
    overflow: hidden;
    max-width: 165px; // define max width of the text
    height: 30px;     // define height of the text based on font size and line height
    line-height: 1.4;
    font-size: 11px;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;    
}

使文本适合特定行数，可变宽度

2 个答案: