省略不工作

Question

我有以下代码：

.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但无济于事。

任何人都可以看到有什么问题或告诉我如何达到这个温和的要求？

Answer 1

从MDN webpage for text-overflow（粗体加为重点）：

此属性仅影响溢出块容器元素在它的内嵌前进方向

你所需要的内容将text-overflow应用于块容器，但将其应用于内联容器（span）。你可以在两种不同的方式解决问题：

1. 充分利用span有block/inline-block显示：

2. 或应用的text-overflow到div代替span

Answer 2

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>。

Answer 3

您只需更改类和最大宽度属性即可：

.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; 
} 

Answer 4

就我个人的经验，我建议你干脆把text-overflow到<div>标签。

问题在于把那个放到<span>标签那里。