CSS单行显示产品标题时长单词被直接省略如何保留部分字符

你当前代码出现的异常表现，本质是浏览器默认文本排版规则导致的：
默认状态下断词规则为overflow-wrap: normal，会优先保障完整单词的展示，当行尾剩余宽度不够放下整个长单词时，浏览器会把整个单词移动到下一行排布。因为你设置了单行超出内容隐藏，这部分被挪到下一行的长单词会直接被裁剪，视觉上就表现为整段长单词被替换成了省略号。

不需要重构原有的截断逻辑，只需要补充对应的断词规则，让浏览器允许在长单词内部拆分字符，优先利用当前行的剩余空间排布内容即可。
修正后的完整CSS代码如下：

.title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
    /* 新增：允许长单词在行内任意字符位置打断，避免整词被挤到下一行后被隐藏 */
    overflow-wrap: anywhere;
    /* 兼容旧内核浏览器的断词规则 */
    word-break: break-word;
}

添加上述属性后，浏览器会优先把长单词中能被当前行宽度容纳的部分留在行内展示，超出的部分会正常截断并拼接省略号，不会再出现整词消失换成省略号的情况。

• 不推荐直接使用word-break: break-all实现断词效果：这个规则过于激进，哪怕是正常长度的短单词，只要碰到行尾边界就会强行从单词中间打断，会严重影响文本可读性。
• 注意两个相似断词属性的差异：
  • overflow-wrap: break-word无法解决当前问题：这个属性只会在单词本身长度超过整行宽度时才打断单词，如果行尾有剩余空间但放不下完整单词，还是会把整词挪到下一行，和默认规则的表现一致。
  • overflow-wrap: anywhere完全匹配需求：这个规则会优先折算当前行的剩余空间，只要能放下长单词的部分字符，就会把这部分留在当前行排布，剩下的内容按截断规则处理。
• 如果你的需求是严格单行展示，不需要依赖-webkit-line-clamp这套多行截断逻辑，可以替换为兼容性更好、性能开销更低的纯单行截断写法：

.title {
    /* 统一行高与元素高度，严格限制单行展示 */
    line-height: 24px;
    height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    /* 保留断词规则，解决长单词整词被替换的问题 */
    overflow-wrap: anywhere;
}

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