React项目CSS文本溢出省略时如何保留末尾span元素正常显示

解决方案 #

你只需要调整外层div的样式，预留出span的显示空间即可，无需修改span的任何属性也不需要改动DOM结构，参考代码如下：

<div
  style={{
    backgroundColor: '#ffff00',
    maxWidth: '100%',
    display: 'inline-block',
    whiteSpace: 'nowrap',
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    // 核心配置：预留出span的显示宽度，可根据span的实际尺寸调整数值
    paddingRight: '18px',
    // 保证padding不会撑大外层容器的总宽度
    boxSizing: 'border-box',
  }}
>
  ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789
  <span
    style={{
      backgroundColor: '#00ff00',
      color: '#ffffff'
    }}
  >
    x
  </span>
</div>

实现逻辑 #

• paddingRight 会把文本截断的位置向左偏移，刚好预留出span的显示空间
• boxSizing: border-box 确保外层div的maxWidth: 100%包含padding的宽度，不会超出父容器的尺寸
• 文本溢出时的省略号会显示在预留空间的左侧，span则自动填充右侧预留的位置，始终可见

内容的提问来源于stack exchange，提问作者NzDush