css文字处理（溢出、折行）

蛙夏~

已于 2022-08-19 16:31:40 修改

阅读量6.5k

点赞数 3

分类专栏： css 文章标签： css 前端

于 2022-08-19 16:07:32 首次发布

本文链接：https://blog.youkuaiyun.com/y1238r/article/details/126424346

版权

css 专栏收录该内容

6 篇文章

订阅专栏

文章目录

一、文字溢出，省略号显示
二、文字折行显示

一、文字溢出，省略号显示

前提：元素必须是块级元素、行内块元素，否则设置的样式不会生效。

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>