問題描述

這是我試過的 (見 here)：

body {
    overflow: hidden;
}

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
}

本質上，當窗口小時，我希望跨度縮小。我做錯了什麼？

最佳解決方案

你沒有做錯什麼每個瀏覽器都不支持。有一個 jQuery 插件 ellipsis，允許你在任何瀏覽器中使用這個 CSS 。

編輯修正，您需要具有 CSS overflow，width，display 和 white-space 。

http://jsfiddle.net/HerrSerker/kaJ3L/1/

span {
    border: solid 2px blue;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
    display: block;
    overflow: hidden
}

附錄如果您想要了解線夾 (Multiline Overflow Ellipses) 的技術概述，請查看此 CSS-Tricks 頁面：https://css-tricks.com/line-clampin/

次佳解決方案

確保你有一個塊元素，一個最大的大小和設置溢出隱藏。 (在 IE9 和 FF7 中測試)

http://jsfiddle.net/uh9zD/

div {
    border: solid 2px blue;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}

第三種解決方案

對於 Chrome 中的 multi-lines 使用：

display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; // max nb lines to show
-webkit-box-orient: vertical;

啓發自 youtube 😉

第四種方案

我在 Chrome 下有一個省略號的問題。打開 white-space：nowrap 似乎修復了。

max-width: 95px;
max-height: 20px;
overflow: hidden;
display: inline-block;
text-overflow: ellipsis;
border: solid 1px black;
font-size: 12pt;
text-align: right;
white-space: nowrap;

參考文獻

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。