HTML CSS 文本处理效果

HTML CSS 文本处理效果有文本溢出、整字换行、换行规则以及书写模式
下面将介绍以下属性：
text-overflow
word-wrap
word-break
writing-mode

CSS 文字溢出 text-overflow 属性规定应如何向用户呈现未显示的溢出内容，代码如下：

<style> 
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;
}
</style>

<p class="test1">text-overflow: clip</p>
<p class="test2">text-overflow: ellipsis</p>

我们还可以通过设置鼠标样式，来实现鼠标放在隐藏文本上自动显示的效果，代码如下：

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

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

<div class="test" style="text-overflow:ellipsis;">把鼠标移动到下面的 div 上，来查看完整文本</div>
<div class="test" style="text-overflow:clip;">把鼠标移动到下面的 div 上，来查看完整文本</div>

CSS word-wrap 属性可以使长文字自动换行，代码如下：

<style> 
p.test {
  width: 11em; 
  border: 1px solid #000000;
  word-wrap: break-word;
}
</style>


<p class="test">word-wrap 属性 ZHUEi's收集窝 是由 ZHUEi 官方运营的，唯一网址是 http://www.zhuei.com</p>

CSS word-break 属性可以设置特殊的换行规则，代码如下：

<style> 
p.test1 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: keep-all;
}

p.test2 {
  width: 140px; 
  border: 1px solid #000000;
  word-break: break-all;
}
</style>


<p class="test1">word-wrap 属性 ZHUEi's收集窝 是由 ZHUEi 官方运营的，唯一网址是 http://www.zhuei.com</p>
<p class="test2">word-wrap 属性 ZHUEi's收集窝 是由 ZHUEi 官方运营的，唯一网址是 http://www.zhuei.com</p>

<p><b>注释：</b>Opera 12 和更早版本不支持 word-break 属性。</p>

CSS 书写模式 writing-mode 属性规定文本行是水平放置还是垂直放置，代码如下：

<style> 
p.test1 {
  writing-mode: horizontal-tb; 
}

span.test2 {
  writing-mode: vertical-rl; 
}

p.test2 {
  writing-mode: vertical-rl; 
}
</style>

<p class="test1">word-wrap 属性 ZHUEi's收集窝 是由 ZHUEi 官方运营的，唯一网址是 http://www.zhuei.com</p>
<p>word-wrap 属性 <span class="test2">ZHUEi's收集窝</span> 是由 ZHUEi 官方运营的，唯一网址是 http://www.zhuei.com</p>
<p class="test2">word-wrap 属性 ZHUEi's收集窝 是由 ZHUEi 官方运营的，唯一网址是 http://www.zhuei.com</p>

CSS 文本效果属性

下表列出了 CSS 文本效果属性：

属性	描述
text-align-last	指定如何对齐文本的最后一行。
text-justify	指定对齐的文本应如何对齐和间隔。
text-overflow	指定应如何向用户呈现未显示的溢出内容。
word-break	指定非 CJK 脚本的换行规则。
word-wrap	允许长单词被打断并换到下一行。
writing-mode	指定文本行是水平放置还是垂直放置。

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！