内联元素无法生效text-overflow: ellipsis的问题排查

嘿，我来帮你搞定这个省略号不生效的问题！你遇到的核心问题很典型——text-overflow: ellipsis 无法在内联元素上生效，而你给样式的 <strong> 标签默认就是内联元素。我来给你拆解原因和解决方案，同时保证原有布局完全不变：

为什么你的代码不生效？ #

text-overflow: ellipsis 要正常工作，必须同时满足三个条件：

• 元素设置了 overflow: hidden;
• 元素设置了 white-space: nowrap;
• 元素是**块级元素（block）、行内块级元素（inline-block）**或弹性项（flex item）

你的代码里前两个条件都满足，但 <strong> 是内联元素，内联元素的 width 属性是无效的——没有明确的宽度限制，浏览器就不知道什么时候触发省略号。

针对性修改方案 #

我只需要给你调整两处CSS，就能让省略号生效，同时保留原有的左浮动时间、右浮动头像、中间作者+认证标识的布局：

1. 给作者名字标签添加行内块级特性
   修改 .woocommerce-review__author 的CSS，新增 display: inline-block;，让它能识别你设置的 width:12ch：

p.meta strong.woocommerce-review__author {
    font-size: 14px;
    font-weight: normal;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 12ch;
    display: inline-block; /* 新增：把内联元素改成行内块级 */
    vertical-align: middle; /* 可选优化：让和旁边的"verified owner"文字对齐更整齐 */
}

2. 给父容器添加清除浮动的样式
   你的 p.meta 里有左浮动的时间和右浮动的头像，添加 overflow: hidden; 可以清除浮动，同时让中间的作者和认证标识被限制在剩余空间内，不会被浮动元素挤压：

p.meta {
    font-size: 14px;
    border-bottom: 1px solid #eeeeee;
    padding: 5px;
    margin: 0;
    overflow: hidden; /* 新增：清除浮动并限制内部内容范围 */
}

可选优化（自适应宽度） #

如果你不想固定作者名字的宽度（12ch），希望它能自动填满中间的剩余空间，把 width:12ch 改成 max-width: calc(100% - 120px);（这里的120px是估算时间和头像的总宽度，你可以根据实际显示效果微调数值），这样不管名字多长，都会在不挤掉左右元素的前提下自动截断显示省略号。

修改后测试一下，当作者名字超过限制宽度时，就会自动显示 ...，而且原有的布局完全不会改变哦！

备注：内容来源于stack exchange，提问作者rk9802710