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）。您可以通过两种不同的方式解决问题：

让span显示block / inline-block：
或将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

您需要做的就是更改类和max-width属性，如下所示：

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

或者替代

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

Answer 4

根据我的个人经验，我建议您只需将text-overflow添加到<div>标记。

问题在于将其放在<span>标记处。

省略号不起作用

4 个答案: