Laravel中text-overflow:ellipsis显示未转义数据时失效求助

问题根源 #

你用CKEditor生成的内容包含HTML块级标签（比如<p>、<br>、<div>），这些标签会打破.descresize容器的white-space:nowrap约束——块级元素默认会独占一行，导致内容自动换行，text-overflow:ellipsis的单行溢出触发条件不满足，自然不会显示省略号。

解决方案 #

方案1：CSS强制统一子元素布局（保留部分行内格式）

修改你的CSS，强制容器内所有子元素继承单行规则：

.descresize{
    display: inline-block;
    width: 500px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%; /* 适配表格宽度，避免超出容器 */
}
/* 强制所有子元素为行内元素，继承单行规则 */
.descresize * {
    display: inline;
    white-space: inherit;
    margin: 0;
    padding: 0;
}

这个方法会保留文本的行内格式（比如<strong>、<em>），同时让所有内容在一行内显示，触发省略号。

方案2：剥离HTML标签（纯文本显示，丢失格式）

如果可以接受丢失CKEditor的格式，直接用strip_tags过滤掉所有HTML标签，让内容变成纯文本，原CSS就能正常生效：

<td class="p-4"><span class="descresize">{!! strip_tags($treatment->description) !!}</span></td>

验证效果 #

修改后，CKEditor生成的带标签内容会被强制转为单行，超出.descresize宽度时，末尾会正确显示省略号。

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