CSS：用省略号截断字符串答案

【问题标题】：CSS: Truncate String with EllipsisCSS：用省略号截断字符串
【发布时间】：2021-10-24 23:37:33
【问题描述】：

我正在开发一个 React.js 项目，这是它的示例代码。

<div
  style={{
    backgroundColor: '#ffff00',
    maxWidth: '100%'
  }}
>
  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
  <span
    style={{
      backgroundColor: '#00ff00',
      color: '#ffffff'
    }}
  >
    x
  </span>
</div>

这个div 包含在另一个父容器中。由于该父容器的尺寸较小，文本在子容器内无法正确显示，并完全隐藏了span。

所以我重构了孩子div 的样式，我可以用点来解决文本问题。

<div
  style={{
    backgroundColor: '#ffff00',
    maxWidth: '100%',
    display: 'inline-block',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
  }}
>
  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
  <span
    style={{
      backgroundColor: '#00ff00',
      color: '#ffffff'
    }}
  >
    x
  </span>
</div>

结果：

但是，我仍然看不到span。我怎样才能使它在子div 容器的末尾可见？我只想截断文本，而不是span。

我不能对span（如样式更改）或元素结构进行任何更改。

【问题讨论】：

文本 ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 可以用 span 包裹吗？
不能，我不能做任何结构上的改变。

标签： css reactjs overflow truncate ellipsis

【解决方案1】：

我能想到的唯一方法是不将文本包装在节点中：

将 CSS 添加到父级

.wrapper {
  position: relative;
}

.wrapper span {
  position: absolute;
  right: 0;
}

    <div
      class="wrapper"
      style="
        background-color: #ffff00;
        maxWidth: 100%;
        display: inline-block;
        whiteSpace: nowrap;
        overflow: hidden;
        textOverflow: ellipsis;
      "
    >
      ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
      <span
        style="
          background-color: #00ff00;
          color: #ffffff;
        "
      >
        x
      </span>
    </div>

看看https://codesandbox.io/s/wonderful-night-1pwvh?file=/src/index.js

【讨论】：

【解决方案2】：

也许这对你有帮助。

html {
  background-color: #e9e9e9;
}

#wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  
}
#text {
  width: 100px;
  background-color: red;
  max-width: 100%;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div id="wrapper">
  <p id="text">
    ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
  </p>
  <span>
    x
  </span>
</div>

【讨论】：

我很欣赏这个答案，结果是我真正想要的，但我不允许做任何结构上的改变。所以我不能将文本 (ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789) 添加到另一个元素中。