如何实现span中高亮文本居中及双向溢出截断效果？

要让高亮部分始终处于可见文本的中心，同时实现前后双向溢出截断，我们可以通过拆分文本结构结合Flex布局来实现，具体方案如下：

核心思路 #

将长文本拆分为三个部分：高亮前的内容、高亮内容、高亮后的内容，利用Flex布局让前后内容平分容器剩余空间，超出部分自动截断并显示省略号，从而保证高亮内容始终处于可见区域的中心位置。

修改后的代码 #

<html>
<head>
  <style>
    .truncate-container {
      max-width: 200px;
      display: flex;
      align-items: center;
      gap: 4px; /* 可选：给前后文本和高亮部分之间加一点间距 */
    }
    .truncate-part {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .highlight {
      font-size: larger;
    }
  </style>
</head>
<body>
  <div class="truncate-container">
    <span class="truncate-part">This is a very long text and at the end of this very long text, I have a</span>
    <em class="highlight">highlighted</em>
    <span class="truncate-part">part that should be visible.</span>
  </div>
</body>
</html>

关键CSS属性说明 #

• display: flex：将容器设置为Flex布局，让内部三个元素在一行排列
• flex: 1：给前后两个文本容器分配相等的剩余空间，确保高亮部分居中
• overflow: hidden + text-overflow: ellipsis + white-space: nowrap：实现单行文本溢出时截断并显示省略号
• align-items: center：让所有元素垂直居中，保持排版整齐

这种方案兼容性好，能稳定实现高亮内容居中的双向截断效果，且可以灵活调整间距和样式。

内容的提问来源于stack exchange，提问作者K. G