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; ： 演示

Answer 2

更新

使用display: inline-block僅在較小的屏幕上完全刪除h1 。 您應該避免這種情況。

同樣，從技術上講，文本仍居中。 在將文本居中時，它考慮了省略號。

原始答案

為了使省略號樣式起作用，您必須在帶有文本的元素上設置一些內容：

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

display: block確保將您要在其上生成省略號的框顯示為塊。 如果不是，它將不知道邊界框在哪里。

text-overflow: ellipsis顯然應該生成省略號。

overflow: hidden由於某種原因overflow: hidden ，除非您有此操作，否則瀏覽器不會生成省略號。 我認為這與以下事實有關：文本將隨文本一起流出框外。

white-space: nowrap可以防止文本換行。 這樣，您可以在一行的末尾加上省略號。

那工作嗎