css文字处理(溢出、折行)

文章目录

  • 一、文字溢出,省略号显示
    • 1、单行文本省略
    • 2、多行文本省略
    • 3、IE浏览器,按字数省略显示
    • 4、举例
  • 二、文字折行显示
    • 1、 word-break: break-all
    • 2、word-wrap: break-word
    • 3、举例


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

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

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) 页面渲染效果
css文字处理(溢出、折行)_第1张图片

二、文字折行显示

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) 页面渲染效果
css文字处理(溢出、折行)_第2张图片

你可能感兴趣的:(css,css,前端)