Css 将文本调整到特定行数，可变宽度

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

Announcing Bosun, our new open
source monitoring & alerting system

Stack Exchange for
the iPad is here

A
headline

显然，我可以在正确的断点处插入一个

元素，甚至可以尝试自动计算它的位置，但是有没有CSS可以帮我做到这一点？这将是一个很好的工作在一个响应的布局。我并不特别关心浏览器的兼容性，所以那些参考即将发布的规范的答案也会被接受

这应该行得通：

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

---

因此，目前在CSS中没有这样做的方法，但是CSS4 Text刚刚在规范草案中添加了

Text wrap:balance

，这正是我的问题所要求的。我会留下这个作为未来辉煌的答案，在那里这是支持的

---

使用JavaScript可能比使用CSS容易得多。由于标题的长度可能不会包含固定的字符范围，@j08691认为JavaScript比CSS本身更能解决这一问题，这是正确的。是的，如果需要，我会这样做，我只是觉得有人可能有一个我错过的狡猾的把戏。我想不出用CSS做这件事的任何方法。用Javascript实现这一点所需的一切都在@Guffa Thank Moobs的精彩回答中，这是一个很好的回退。感谢你花时间回答，但这不会“平衡”两行文字（我想我在最初的问题中没有说清楚，我会去修改它）。不，它确实不会：）如果使用得当，css的

calc

可能会起作用？