css不定宽度截取字符串

在CSS中，如果想要在不定宽度的情况下截取字符串，可以使用text-overflow属性。text-overflow有两个属性值可选：ellipsis和clip。其中ellipsis表示在截取的字符串末尾添加省略号，而clip表示直接截断字符串。

.demo {
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 添加省略号 */
} 

以上代码中，首先通过white-space属性禁止文字换行；然后通过overflow属性隐藏超出部分；最后使用text-overflow属性，在截取的位置处添加省略号。

需要注意的是，text-overflow属性只对单行块级元素生效，而且要求元素的宽度不能是百分比等不确定的值。

.demo {
  width: 200px; /* 确定宽度 */
  height: 20px; /* 设置高度，避免脱离文本流 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 添加省略号 */
  white-space: nowrap; /* 禁止换行 */
} 

以上代码中，通过设置固定的宽度，避免了宽度不确定的问题；同时设置了高度，避免因文字超出导致元素脱离文本流。

在实际的项目中，我们经常会遇到需要截取字符串并添加省略号的需求，这时我们就可以运用CSS的text-overflow属性来实现。通过结合其他属性，我们可以实现不定宽度的情况下的字符串截取，并添加省略号，从而提升页面的美观性和可读性。