如何使用div实现特定文本溢出截断并显示省略号？

现有代码 #

CSS代码 #

.container {
  width: 200px;
  border: solid;
}

.copy {
  white-space: nowrap; */
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  width: 150px;
}

HTML代码 #

<div class="container">
  <div class ="copy">
    Hello
    &nbsp;
    <div class="name">
      G. Antetokounmponoustias
    </div>
    , let's go.
  </div>
<div>

需求说明：希望实现显示**“Hello G. Antetokounmponoust...”的效果，而非“Hello G. Antetok..., let's go.”**，目的是能根据媒体视口决定截断名称或整个句子。此前用span搭配inline-block实现过该效果，但存在对齐问题，改用div后截断生效，但溢出部分不显示省略号，确认用div是否可实现需求。

解决方案 #

完全可以用div实现需求，问题出在当前Flex布局的规则配置和省略号生效条件上，调整方案如下：

1. 修正CSS语法错误：先删除.copy样式中多余的*/，该语法错误会干扰样式解析。
2. 将截断规则绑定到目标元素：要单独截断name元素而非整个copy容器，需把white-space: nowrap、text-overflow: ellipsis、overflow: hidden这些属性移到.name类上，同时利用Flex布局的特性，让name元素在空间不足时自动收缩。
3. 优化对齐效果：给.copy添加align-items: center，解决元素间垂直对齐的问题。

调整后的CSS #

.container {
  width: 200px;
  border: solid;
}

.copy {
  display: flex;
  align-items: center;
  width: 150px;
}

.name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  flex-shrink: 1;
  margin: 0 4px;
}

调整后的HTML #

<div class="container">
  <div class="copy">
    Hello
    <div class="name">
      G. Antetokounmponoustias
    </div>
    , let's go.
  </div>
</div>

调整后，空间不足时仅name元素会被截断并显示省略号，达成预期效果；若需在小视口下截断整个句子，只需通过媒体查询将截断规则移回.copy容器即可。

内容的提问来源于Stack Exchange，提问作者Donnovan