相关疑难解决方法(0)

我有一个弹性布局的网页,如果调整浏览器窗口大小,它会改变其宽度.

在这种布局中,标题(h2)将具有可变长度(实际上是我无法控制的博客标题的头条新闻).目前 - 如果它们比窗户宽 - 它们分成两行.

是否有一个优雅的,经过测试的(跨浏览器)解决方案 - 例如使用jQuery - 缩短了标题标签的innerHTML,如果文本太宽而无法放入当前屏幕的一行,则会添加"..."容器宽度？

我知道你可以使用CSS规则的组合,当溢出时间(离开父节点)时,文本以省略号(...)结尾.

是否可以(随意说,不)实现相同的效果,但让文本包裹多行？

这是一个演示.

div {
  width: 300px; 
  height: 42px; 
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}

正如您所看到的,当文本比div的宽度宽时,文本以省略号结尾.但是,仍然有足够的空间让文本换行第二行并继续.这被white-space: nowrap省略,这是省略号工作所必需的.

有任何想法吗？

PS:没有JS解决方案,如果可能的话纯CSS.