CSS3 省略号、居中文本和响应式设计

Question

有十亿个教程，但不幸的是，没有一个对我有用。我需要一些艺术家姓名在标题中，居中，但带有 css 省略号，所以很长的名字会得到“...”并将被截断。

您可以在此处查看设计:http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php请记住调整浏览器窗口的大小。

它是为手机设计的，所以我不能有任何固定的方法，它应该适用于各种手机屏幕尺寸。我可以使省略号起作用，但文本不再居中。关于如何做到最好的任何线索？我真的很想避免使用任何 javascript，因为性能非常重要。

Answer 1

您需要使用 overflow 和 text-overflow 更新 h1 的规则。

.header h1, .headerwhite h1 {
    font-size: 15px;
    line-height: 49px;
    text-overflow: ellipsis;/* generates dots if text on one single line and truncated */
    overflow: hidden;/* triggers text-oveflow and mids floatting elements */
    white-space: nowrap;/* keep text on a single line to trigger text-overflow; */
    display: block;/* reset to basic behavior of h1 , else inline-block drops down if not enough room */
}

与 dartanian300 的答案基本相同 :)

您也可以控制 h1 的最大宽度并添加一个 margin:auto; : demo