有十亿个教程，但遗憾的是没有一个对我有用。 我需要一些艺术家名称在标题中，居中，但带有 css 省略号，所以很长的名称会得到“...”并且会被截断。
你可以在这里看到设计：http://www.cphrecmedia.dk/musikdk/mobile/artistchannel.php 请记住调整浏览器窗口的大小。
它适用于手机，所以我不能有任何固定的，它应该适用于各种手机屏幕尺寸。我可以使省略号起作用，但是文本不再居中。 关于如何做到最好的任何线索？我真的很想避免使用任何 javascript，因为性能非常重要。
【问题讨论】：
您需要将h1 的规则更新为overflow 和text-overflow。
.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
【讨论】：
display: inline-block 应该与width 一起解决它的百分比。我的意思是除了答案中提供的其他内容。
inline-block？也许那么可能存在版本差异。我在 Chrome 24 (duh :() 上，它将文本移动到左对齐，而没有 inline-block。width 不是必需的。只是注意到
更新
使用display: inline-block 只是在较小的屏幕上完全删除h1。你应该避免这种情况。
此外，从技术上讲，文本仍然居中。文本居中时会考虑省略号。
原始答案
为了使省略号样式起作用，您必须在带有文本的元素上设置一些内容：
display: block;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;display: block 确保您尝试在其上生成省略号的框显示为块。如果不是，它将不知道边界框在哪里。
text-overflow: ellipsis 显然应该生成省略号。
overflow: hidden 出于某种原因，浏览器不会生成省略号，除非你有这个。我相信这与文本将随它一起流出框外这一事实有关。
white-space: nowrap 这可以防止您的文本换行到多行。这样一来，你就可以在最后得到一个带有省略号的行。
那行吗？
【讨论】：