CSS 文本效果

CSS 文字溢出

CSS text-overflow 属性规定应如何向用户呈现未显示的溢出内容。可以被裁剪，也可以将其呈现为省略号（...）。

p.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

p.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

需要先设置 overflow: hidden

下面的例子展示了将鼠标悬停在元素上时如何显示溢出的内容：

<!DOCTYPE html>
<html>
<head>
<style> 
div.test {
 white-space: nowrap; 
 width: 200px; 
 overflow: hidden; 
 border: 1px solid #000000;
}

div.test:hover {
 overflow: visible;
}
</style>
</head>
<body>

<p>请把鼠标移动到下面的 div 上，来查看完整文本。</p>
<div class="test" style="text-overflow:ellipsis;">这里有一些无法容纳在框中的长文本</div>
<br>
<div class="test" style="text-overflow:clip;">这里有一些无法容纳在框中的长文本</div>

</body>
</html>

CSS 字换行（Word Wrapping）

CSS word-wrap 属性使长文字能够被折断并换到下一行。

语法：

word-wrap: normal|break-word;

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。(上图第一个文字框)
break-word	在长单词或 URL 地址内部进行换行。(上图第二个文字框)

CSS 换行规则

CSS word-break 属性指定换行规则。

p.test1 {
  word-break: keep-all;
}

p.test2 {
  word-break: break-all;
}

CSS 书写模式

CSS writing-mode 属性规定文本行是水平放置还是垂直放置。