文本溢出、整字换行、换行规则以及书写模式
代码：
<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;
}
p.test3 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
}
p.test3:hover {
overflow: visible;
}
p.test4 {
width: 200px;
border: 1px solid #000000;
overflow: hidden;
word-wrap: break-word;
}
</style>
</head>
<body>
<h2>text-overflow: clip: 裁剪</h2>
<p class="test1">这里有一些无法容纳在框中的长文本</p>
<h2>text-overflow: ellipsis 省略号（...）</h2>
<p class="test2">这里有一些无法容纳在框中的长文本</p>
<h2>text-overflow: visible 显示</h2>
<p class="test3">这里有一些无法容纳在框中的长文本</p>
<h2> word-wrap: break-word; 换行</h2>
<p class="test4">这里有一些无法容纳在框中的长文本</p>
</body>
渲染效果：
