省略号不起作用

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

max-width 被 inline 个元素忽略。

对此有四种可能的解决方案：

要么将 CSS 应用于 .section-segment 而不是 .biz-desc
或者您将 biz-desc class 添加到 <div> (<div class="section-segment biz-desc">)
或者您将 display: block; 或 display: inline-block; 添加到 CSS 规则
或者您将 <span> 更改为 block-level 元素，例如 <p> 或 <div>.

Answer 2

来自 MDN webpage for text-overflow（为强调而添加的粗体）：

This property only affects content that is overflowing a block container element in its inline progression direction

您需要将 text-overflow 应用于块容器，但您正在将其应用于内联容器 (span)。您可以通过两种不同的方式解决问题：

让span显示block/inline-block:
或将 text-overflow 应用于 div 而不是 span

Answer 3

您需要做的就是像这样更改 class 和 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> 标签。

省略号不起作用

Ellipsis not working

html

css

ellipsis