Question

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

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

它适用于手机，所以我不能有任何固定的功能，它应该适用于所有类型的移动屏幕。我可以使省略号工作，但文本不再居中。关于如何做到这一点的任何线索？我真的想避免使用任何javascript，因为性能非常重要。

Answer 1

您需要使用h1＆amp;更新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

Answer 2

<强>更新

使用display: inline-block只会在较小的屏幕上完全删除h1。你应该避免这种情况。

另外，从技术上讲，文本仍然是居中的。它将文本居中时考虑省略号。

原始回答

为了使省略号样式起作用，你必须在文本元素上设置一些东西：

display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;

display: block确保您尝试生成省略号的框显示为块。如果不是，它将不知道边界框的位置。

text-overflow: ellipsis显然应该生成省略号。

overflow: hidden由于某种原因，浏览器不会生成省略号，除非你有这个。我认为这与文本只会在框外流动的事实有关。

white-space: nowrap这会阻止您的文字换行到多行。这样，你最后有一行带省略号。

那工作？

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

2 个答案: