css文字处理（溢出、折行）
css，文字单行省略、多行省略，文字折行写法
·
文章目录
一、文字溢出，省略号显示
前提：元素必须是块级元素、行内块元素，否则设置的样式不会生效。
1、单行文本省略
.single-content {
/* 文本不换行 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 超出的文字省略号表示 */
text-overflow: ellipsis;
}
2、多行文本省略
此样式在IE浏览器上不生效，在其它浏览器有效果
.multi-content {
display: -webkit-box;
/* 垂直对齐 */
-webkit-box-orient: vertical;
/* 几行省略 */
-webkit-line-clamp: 3;
/* 超出隐藏 */
overflow: hidden;
/* 超出的文字省略号表示 */
text-overflow: ellipsis;
}
3、IE浏览器，按字数省略显示
function wordlimit(className, num) {
var dom = document.getElementsByClassName(className)[0];
// 去掉前后空格
var domValue = dom.innerHTML.replace(/(^\s*)|(\s*$)/g, "");
if (domValue.length > num) {
dom.innerHTML = domValue.substring(0, num) + '...'
}
}
wordlimit('multi-content', 20);//wordlimit(class名，展示的文字字数)
4、举例
(1) 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字溢出</title>
<style>
* {
margin: 0;
padding: 0;
}
.main:after {
content: '';
clear: both;
display: block;
}
.main>div {
width: 200px;
float: left;
margin: 10px 0 0 10px;
}
.title {
text-align: center;
}
.detail-style {
border: 1px solid red;
padding: 20px;
margin-top: 10px;
}
.single-content {
/* 文本不换行 */
white-space: nowrap;
/* 超出隐藏 */
overflow: hidden;
/* 超出的文字省略号表示 */
text-overflow: ellipsis;
}
.multi-content {
display: -webkit-box;
/* 垂直对齐 */
-webkit-box-orient: vertical;
/* 几行省略 */
-webkit-line-clamp: 3;
/* 超出隐藏 */
overflow: hidden;
/* 超出的文字省略号表示 */
text-overflow: ellipsis;
padding: 0;
}
</style>
</head>
<body>
<div class="main">
<div class="main-normal">
<div class="title">正常显示</div>
<div class="normal-content detail-style">
一个人最怕不老实，青年人最可贵的是老实作风。"老实"就是不自欺欺人，做到不欺骗人家容易，不欺骗自己最难。"老实作风"就是脚踏实地，不占便宜。世界上没有便宜的事，谁想占便宜水就会吃亏。 ——徐特立
</div>
</div>
<div class="main-single">
<div class="title">单行省略</div>
<div class="single-content detail-style">
一个人最怕不老实，青年人最可贵的是老实作风。"老实"就是不自欺欺人，做到不欺骗人家容易，不欺骗自己最难。"老实作风"就是脚踏实地，不占便宜。世界上没有便宜的事，谁想占便宜水就会吃亏。 ——徐特立
</div>
</div>
<div class="main-multi">
<div class="title">多行省略</div>
<div class="multi-content detail-style">
一个人最怕不老实，青年人最可贵的是老实作风。"老实"就是不自欺欺人，做到不欺骗人家容易，不欺骗自己最难。"老实作风"就是脚踏实地，不占便宜。世界上没有便宜的事，谁想占便宜水就会吃亏。 ——徐特立
</div>
</div>
</div>
</body>
</html>
(2) 页面渲染效果
二、文字折行显示
1、 word-break: break-all
两个break，强制换行，容器末尾换行，会截断单词，不会产生多余的空格。
2、word-wrap: break-word
两个word，单词长度大于容器后，会超出容器显示；当单词很长时，换行显示，会产生多余的空格，影响观感。会产生不可预期的效果。
3、举例
(1) 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字折行</title>
<style>
.main>div {
width: 200px;
float: left;
margin: 10px 0 0 20px;
}
.title {
text-align: center;
}
.detail-style {
border: 1px solid red;
padding: 20px;
margin-top: 10px;
}
.mandatory-content {
word-break: break-all;
}
.compromise-content {
word-wrap: break-word;
}
</style>
</head>
<body>
<div class="main">
<div class="main-normal">
<div class="title">正常文本</div>
<div class="normal-content detail-style">折行折行折行折行行折行折折行折折行折折折折111watermelonbeautiful</div>
</div>
<div class="main-mandatory">
<div class="title">word-break: break-all</div>
<div class="mandatory-content detail-style">折行折行折行折行行折行折折行折折行折折折折111watermelonbeautiful</div>
</div>
<div class="main-compromise">
<div class="title">word-wrap: break-word</div>
<div class="compromise-content detail-style">折行折行折行折行行折行折折行折折行折折折折111watermelonbeautiful</div>
</div>
</div>
</body>
</html>
(2) 页面渲染效果
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)