如何仅当文本过长时为元素设置200px宽度，短文本不应用该宽度样式

完全可以实现该效果，不需要借助JavaScript判断文本长度，通过调整CSS属性即可精准匹配需求。

原代码的问题 #

原写法给.cut-text硬编码了固定width: 200px，会导致所有元素不管文本长短都被强制撑到200px宽度，短文本会出现无意义的多余留白，不符合“短文本不设置固定宽度”的预期。

调整后的正确代码 #

.cut-text {
  /* 修正块级元素默认撑满父容器宽度的行为，让元素宽度跟随内部文本收缩 */
  width: fit-content;
  /* 给长文本设置200px的宽度上限，不强制施加固定宽度 */
  max-width: 200px;
  /* 保留原有的单行文本裁切配置 */
  text-overflow: ellipsis;
  overflow: hidden;
  height: 1.2em;
  white-space: nowrap;
}

效果匹配验证 #

• 短文本场景：比如内容为its should no的元素，文本实际宽度远小于200px时，元素宽度会完全包裹文本内容，不会被强制设置200px的固定宽度
• 长文本场景：比如内容为its should yes its should yes its should yes的元素，当文本实际宽度超过200px时，元素宽度会被限制在200px，配合溢出隐藏、单行不换行、文本省略的配置，自动实现超出部分显示省略号的裁切效果

关键注意点 #

• 如果只把原来的固定宽度替换成max-width: 200px，而不设置width: fit-content，块级元素会默认以100%父容器宽度为基准计算宽度，只要父容器宽度超过200px，元素就会被max-width强制压到200px宽，依然会出现短文本也被固定200px的问题
• width: fit-content 的现代浏览器兼容性已经非常完善，如果需要兼容极低版本的旧浏览器，也可以将该属性替换为display: inline-block，实现逻辑基本一致

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