单行省略

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行省略

.text-overflow {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

滚动文本

.text-scroll {
  white-space: nowrap;
  overflow: hidden;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  100% {
    transform: translateX(-100%);
  }
}

处理空格和连字符

word-wrap: break-word; 处理任何超出文本的单词或单字符，确保整个词或字符出现在下一行，并且它不会被破坏。
white-space: pre-wrap; 将处理空格和连字符，确保它们的位置不会破坏文本内容。
另外 word-break: break-all; 和 overflow-wrap: break-word; 属性可以确保超出文本不会破坏文本区域的设计布局。

.text-wrap {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: break-all;
  overflow-wrap: break-word;
}

文字溢出

CSS中设置了宽度，但是其中的内容溢出而不换行，一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。

原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

// 会将单词截断换行显示
word-break: break-all;
或
// 会整个单词换行显示
word-break: break-word;

https://m.php.cn/article/508966.html
https://blog.csdn.net/cheng1a/article/details/128714408

本文链接： https://jianz.xyz/index.php/archives/390/