css 文字换行和超出部分省略号

css 文字换行和超出部分省略号

文字空格与换行

当文本溢出父级 block 元素时, 文本会换行;

这个特性是通过 white-space 控制的;
它影响浏览器处理空格, 换行和 tab 的处理;

它有下面几种值

• normal, 默认值, 连续的空白符会被合并，换行符会被当作空白符来处理。会受到父级 block 的宽度影响, 而换行;
• nowrap, 连续的空白符会被合并，换行符会被当作空白符来处理, 但文本不换行; 且不受父级影响;
• pre, 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。不受到父级的影响;
• pre-wrap, 连续的空白符会被保留。在遇到换行符或者<br>元素; 会受到父级 block 的宽度影响, 而换行;
• pre-line, 连续的空白符会被合并。在遇到换行符或者<br>元素; 会受到父级 block 的宽度影响, 而换行;

下面, 我们分别讲解一下;

normal

.text {
   
  /* normal 是默认值 */
  white-space: normal;
}

<!-- 虽然有很多的空格, 但是浏览器会只展示成1个空格 -->
<p>This         paragraph has    many spaces in it.</p>

如果文本内容溢出, 则会换行

<div style="width: 200px">
  Olympic athlete Sakura Kokumai targeted in antiAsianrantatparkOlympicathlete
  Sakura Kokumai targeted in anti-Asian rant at park