Tailwind CSS文本截断时省略号悬浮于字符串中间问题排查

问题说明 #

• 预期效果：字符串长度超出容器宽度时自动截断，展示为John D...形式，省略号需与字符串底部对齐，效果如下：
  
• 实际异常：省略号悬浮在字符串垂直居中位置，不符合预期，效果如下：
  
• 已排查操作：当前页面使用字体为'Noto Sans JP', sans-serif，更换为其他默认字体后异常仍然存在。

现有实现代码 #

CSS样式定义 #

.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

HTML结构代码 #

<script src="https://cdn.tailwindcss.com"></script>

<div class="rounded-t opacity-80 z-10 flex items-center absolute max-w-[17ch] text-black bg-white py-px px-2 bottom-0 right-4 transform-3d">
  <Icon />
  <p class='truncate mb-0'>{attendeeName}</p>
</div>

问题原因与修复方案 #

根因 #

省略号垂直偏移和字体无关，是flex布局下垂直居中对齐+容器垂直内边距过小（仅py-px即1px）、文本标签未设置固定行高，导致浏览器渲染ellipsis字符时的基线计算出现偏差。

修复操作 #

1. 优先使用Tailwind内置truncate工具类，无需自定义重复样式，同时调整容器垂直内边距、给文本标签设置统一单行行高，修改后代码如下：

<div class="rounded-t opacity-80 z-10 flex items-center absolute max-w-[17ch] text-black bg-white py-1 px-2 bottom-0 right-4 transform-3d">
  <Icon />
  <p class="truncate mb-0 leading-none">{attendeeName}</p>
</div>

• 调整点说明：将py-px改为py-1给文本留出足够的垂直渲染空间，给<p>标签加leading-none类设置行高为1，消除行高计算带来的垂直偏移。

2. 如果必须保留py-px的窄容器高度，可在自定义截断样式中补充行高和垂直对齐规则：

.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1;
  vertical-align: bottom;
}

修改后省略号会自动与文本底部对齐，切换任意字体都不会出现居中悬浮的异常。

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