省略不工作

我有以下代碼：省略不工作

.biz-desc { 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    max-width: 600px; 
 
}

<div class="section-segment"> 
 
    <span class="biz-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus nisi non tellus pharetra, nec tempus mi fringilla. Vestibulum consequat dolor sit amet orci suscipit, id facilisis metus tempus. Maecenas in massa eget nisl porttitor molestie id ut velit. Nullam quis purus porttitor neque fermentum dignissim quis nec felis. Aenean non maximus quam, sit amet tincidunt sapien. Nam ut gravida libero. Quisque tortor ante, maximus sit amet nunc at, convallis posuere felis. Proin venenatis sit amet metus eu porta.</span> 
 
</div>

我的想法是，說明將被截斷，並會顯示三個點（...）當文本太長爲屏幕。

但是這不起作用。我只是從div的邊框中獲取長文本。

我試圖添加max-width: 600px;到.biz-desc但無濟於事。

任何人都可以看到有什麼問題或告訴我如何達到這個溫和的要求？

來源

2016-01-24 dsb

您是否曾嘗試將'biz-desc'類添加到'div'或將CSS應用於'.section-segment'而不是'.biz-desc'？ – Xufox

下面是省略號的工作要求：http://stackoverflow.com/a/33061059/3597276 –

從MDN webpage for text-overflow（粗體加爲重點）：

此屬性僅影響溢出塊容器元素在它的內嵌前進方向

你所需要的內容將text-overflow應用於塊容器，但將其應用於內聯容器（span）。你可以在兩種不同的方式解決問題：

充分利用span有block/inline-block顯示：
或應用的text-overflow到div代替span

來源

2016-01-24 09:03:31

夥計們，你們都很有幫助。謝謝。 – dsb

max-width被inline元素忽略。

有四種可能的解決方案是：

要麼你申請的CSS來.section-segment，而不是.biz-desc
，或者你的biz-desc類添加到<div>（<div class="section-segment biz-desc">）
或者您將display: block;或display: inline-block;添加到CSS規則
或者您將<span>更改爲塊級元素，如<p>或<div>。

來源

2016-01-24 09:03:19 Xufox

您只需更改類和最大寬度屬性即可：

.section-segment{ 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    max-width: 600px; 
}

或者alternativelly

.biz-desc{ 
    display: block; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis; 
    max-width: 600px; 
}

來源

2016-01-24 09:05:14

就我個人的經驗，我建議你乾脆把text-overflow到<div>標籤。

問題在於把那個放到<span>標籤那裏。

來源

2016-01-24 09:10:28

回答

相關問題