CSS多行文本溢出省略显示
2021-10-05 11:47:43
CSS多行文本溢出省略显示

1、单行文本溢出省略显示
2、多行文本溢出省略显示
2.1 WebKit内核浏览器解决办法
2.2 其他浏览器解决方案
2.2.1 定位元素实现多行文本截断
1、单行文本溢出省略显示

实现单行缩略（部分浏览器需要设置宽度）:
```
  /*1. 先强制一行内显示文本（ 默认 normal 自动换行）*/
  white-space: nowrap;  
  /*2. 超出的部分隐藏*/
  overflow: hidden;
  /*3. 文字用省略号替代超出的部分*/
  text-overflow: ellipsis;
```
2、多行文本溢出省略显示

2.1 WebKit内核浏览器解决办法

首先，WebKit内核的浏览器实现起来比较简单，可以通过添加一个-webkit-line-clamp的私有属性来实现，-webkit-line-clamp是用来限制在一个块元素显示的文本的行数。为了实现这个效果，它需要组合其他的WebKit属性：
- display: -webkit-box 将对象作为弹性伸缩盒子模型显示；
- -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式；
- text-overflow: ellipsis 用省略号“…”隐藏超出范围的文本。
具体代码参考如下:
```
/*1. 超出的部分隐藏 */
overflow : hidden;
/*2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
```
这个方法合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。

2.2 其他浏览器解决方案

2.2.1 定位元素实现多行文本截断

目前没有什么CSS的属性可以直接控制多行文本的省略显示，比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号了，代码可以参考下面：
```
p {
    position: relative;
    line-height: 18px;
     /* 高度为需要显示的行数*行高，比如这里我们显示两行，则为36px */
    height: 36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    
    /* 为了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}
```
实现原理很好理解，就是通过伪元素绝对定位到行尾并遮住文字，再通过 overflow: hidden 隐藏多余文字。
它无法识别文字的长短，即文本超出范围才显示省略号，否则不显示省略号。还有因为是我们人为地在文字末尾添加一个省略号效果，就会导致它跟文字其实没有贴合的很紧密，遇到这种情况可以通过添加 word-break: break-all; 使一个单词能够在换行时进行拆分。

缺点：
- （1）需要知道显示的行数并设置行高才行；
- （2）IE6/7不支持after和content，需要添加一个标签来代替；
- （3）省略号的背景颜色跟文本背景颜色一样，并且可能会遮住部分文字，建议可以使用渐变的png背景图片代替。
适合场景：文字内容较多，确定文字内容一定会超过容器的，那么选择这种方式不错。
css html5 html

更多相关内容
vue实现移动端项目多行文本溢出省略
2020-11-20 06:59:30

多行文本溢出省略在做微信公众号开发时,有个需求是这样的找到了一个方法, 2323文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字提示气泡框，在鼠标悬停时显示，代替了系统的title提示。文字...

收起
移动端的text-overflow多行文本溢出显示省略号(…)
2020-12-10 09:10:29

但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接...

收起
CSS实现单行、多行文本溢出显示省略号（…）
2019-07-26 11:37:23

CSS实现单行、多行文本溢出显示省略号（…）示例文档，自行下载查看

收起

多行文本溢出显示省略号

2022-03-15 20:56:29

文本溢出显示省略号分两种情况，单行文本溢出显示省略号（参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873），另外一种就是多行文本溢出显示省略号。多行文本显示省略号有两种办法第一...

文本溢出显示省略号分两种情况，单行文本溢出显示省略号（参考上篇文章https://blog.csdn.net/qq_43687594/article/details/123511873），另外一种就是多行文本溢出显示省略号。

多行文本显示省略号有两种办法

第一种：使用定位伪元素遮盖末尾文字

步骤：

给父元素设置:

     overflow: hidden;/* 溢出隐藏 */
     line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
     text-align: justify;/* 设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末尾文字时才能对齐*/
     position: relative;/* 子绝父相，这里是为了给伪元素设置定位*/

给父元素设置伪元素::after ，并为其设置属性：

     content: "...";/* 省略号是放在文本最后面的 */
     width: 1em;/* 设置伪元素的宽度为1em，是为了遮盖的时候正好遮盖中原来的一个字的大小*/
     background-color: pink;/* 设置与父元素相同的背景颜色，同理，也是为了和原来的内容样式保持一致*/
     position: absolute;/*设置定位，其位置就是文本的右下角 */
     right: 0;bottom: 0;

完整代码：

<!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>Document</title>
    <style>
        .box{
            width: 200px;/* */
            height: 100px;
            background-color: pink;
            overflow: hidden;/* 溢出隐藏 */
            line-height: 20px;/* 设置行高与容器高度成倍数关系，这样避免文本溢出时，文字显示一半 */
            text-align: justify;/* 设置文本对齐方式为两端对齐，这样在伪元素内容遮盖末尾文字时才能对齐*/
            position: relative;/* 子绝父相，这里是为了给伪元素设置定位*/
        }
        /* 因为省略号是放在文本最后面的，所以使用伪元素after */
        .box::after{
            content: "...";/* 省略号是放在文本最后面的 */
            width: 1em;/* 设置伪元素的宽度为1em，是为了遮盖的时候正好遮盖中原来的一个字的大小*/
            background-color: pink;/* 设置与父元素相同的背景颜色，同理，也是为了和原来的内容样式保持一致*/
            position: absolute;/*设置定位，其位置就是文本的右下角 */
            right: 0;bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        我是文本我是文本我是文本我是文我是文我是文我是文我是文我是文我是文我是是文本我是文本我是文本我是文本我是文本我是文本我是文本
    </div>
</body>
</html>

实现效果图：
在这里插入图片描述
优点： 适用范围广泛。
缺点： 当内容没有超出容器范围之外时，也会在右下角显示省略号。低版本浏览器不兼容
缺点的图片解释：

第二种办法：利用旧版弹性盒

步骤：

给容器元素类型转换为display:-webkit-box;
设置弹性盒子垂直排列-webkit-box-orient:vertical;
控制要显示的行数-webkit-line-clamp：数值；
溢出隐藏overflow:hidden;

完整代码：

<!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>Document</title>
    <style>
        /* 多行文本溢出隐藏显示省略号方法二：
          兼容性写法,因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
        */
        .box{
            width: 200px;
            /* height: 100px; 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示*/
            background-color: pink;
            /* 设置高度是行高的倍数，防止文本露出一半 */
            line-height: 20px;
            /* 旧版弹性盒 */
            display: -webkit-box;
            /* 弹性盒子元素垂直排列 */
            -webkit-box-orient: vertical;
            /* 控制要显示的行数 */
            -webkit-line-clamp: 3;
            overflow: hidden;
        }
        
    </style>
</head>
<body>
    <div class="box">
        我是文本我是文本我是文本我是文我是文我是文我是文我是文我是文我是文我是是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本
    </div>
</body>
</html>

效果图如下：在这里插入图片描述
优点： 兼容性比较好
缺点： 如果设置了高度，且高度超过文本显示行数，在第三行会正常出现省略号，但是三行之后的仍然正常显示
bug图如下：

收起

展开全文

html javascript 前端

多行文本溢出问题的解决

2020-11-25 19:14:45

多行文本溢出问题的解决我们都知道单行文本的溢出问题的解决办法，就是： 1.使用宽度with，来限制宽度 2. 使用white-space:nowrap/pre来强制限制换行； 3. 使用overflow:hidden隐藏溢出文本；...

多行文本溢出问题的解决

我们都知道单行文本的溢出问题的解决办法，就是：
							1.使用宽度with，来限制宽度
							2. 使用white-space:nowrap/pre来强制限制换行；
							3. 使用overflow:hidden隐藏溢出文本；
							4. 使用text-flow:ellipsis来用...来表示隐藏的文本

那么多行呢？
有以下几种方法：

1. 使用css3自带的属性-webkit-box来改变，具体方式：
代码示例：

/*css代码：*/
 overflow: hidden;
        text-overflow: ellipsis;
        display:-webkit-box;
       -webkit-line-clamp: 2;/*行数*/
       -webkit-box-orient: vertical;

		![在这里插入图片描述](https://img-blog.csdnimg.cn/20201125113203741.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5MDA4Mw==,size_16,color_FFFFFF,t_70#pic_center)

在这里插入图片描述

but,
缺点有三点：
i：只能在webkit的内核的浏览器和移动端有用，在低版本的可能用不了，兼容性较差；
ii:不能设置高度。
iii：不够灵活，省略号只会出现在最后一行的末尾。

2. 设置相对定位的容器高度，用包含省略号的元素来模拟实现；

css代码如下：

p{
	position:relative;
	line-height:1.4em;
	height:4.2em;
	overflow:hidden;
}
p:after{
	conten:"...";
	position:bsolute;
	bottom:0px;
	right:0px;
	
}

效果如图所示：

在这里插入图片描述
3. 运用js或者jquery插件，或者自己写方法；
资源在我的博客里面就有，也可以在网上查找。

js代码如下：

  <script type="text/javascript" src="js/clamp.js"></script>
    <script>
                var module = document.getElementById("clamp-this-module");
                $clamp(module, {clamp: 3});
            </script> 
<!--jQuery： -->
<script>
	
    -
    	$(document).ready(function() {
			//显示2行
			$clamp($("p")[0], {
				clamp: '3',
		//	useNativeClamp: false,
	//	truncationChar: '。。。',
	//		truncationHTML: '... see more'
			});
			//根据高度自适应
			//			$clamp($("p")[0], {
			//				clamp: 'auto'
			//			});
		})
	</script>

效果如图：
在这里插入图片描述
（还是不能有height属性）
注：
$clamp(node,options);
其中node是要操作的节点，options包括：clamp——行数，useNativeClamp——是否使用-webkit-line-clamp属性，trucationChar——省略的符号（不限于省略号），truncationHTML——省略的内容（不限于符号），animate——是否实现动画折叠。

		还可以通过j.jQuery插件-jQuery.dotdotdot来实现：
		资源也一样被我传到了我的博客。

    <div class="box" style="width:300px;height:100px;">
            测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试
        </div>
       
        <script type="text/javascript">
            $(function(){  
                $(".box").dotdotdot();  
            })      
        </script>

5.自己写jQuery代码来实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"> </script>

<style>
    body{
        height: 2000px;
    }
      .figcaption {
            background: #EEE;
            width: 410px;
            height: 80px;
            margin: 0 auto;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-left: -205px;
            margin-top: -40px;
        }
    p{
        /* width: 200px; */
        line-height: 20px;
        /* height: 200px; */
        
    }
</style>
</head>
<body>
    
<div class="figcaption">
    <p >完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题
        完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问完美解决多行文本溢出显示省略号的问题完美解决多行文本溢出显示省略号的问题完美解决多行文本</p>
</div>


    
      
	<script>
        $(".figcaption").each(function(i){
            var divH = $(this).height();
            var $p = $("p", $(this)).eq(0);/*eq(index|-index)获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个*/
            while ($p.outerHeight() > divH) {
                /*获取第一个匹配元素外部高度（默认包括补白和边框）。

此方法对可见和隐藏元素均有效。*/
                $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
            };
        });    
    </script> 
    
          
        </script>
</body>
</html>

如图所示:
在这里插入图片描述

6.
jquery代码：
<script> $(function() { $(".figcaption").each(function() { var maxwidth = 75; if ($(this).text().length > maxwidth) { $(this).text($(this).text().substring(0, maxwidth)); $(this).html($(this).html() + '......'); } }); }); </script>
这个代码又比上面的好，不仅不受位置改变而带来的影响，而且根据宽度，省略号不单单只会出现在追后一行的最末尾。
如图所示：
在这里插入图片描述
7.根据遍历段落的字数限制来实现：

$(function(){
            var content_arr=[];//定义一个空数组
            $('.box').each(function(){//遍历box内容
                var content=$.trim($(this).text());//去掉前后文空格
                content_arr.push(content);//内容放进数组
            })
            for(var i=0;i<content_arr.length;i++){//遍历循环数组
                if(content_arr[i].length>=50){//如果数组长度（也就是文本长度）大于等于50（数字可自己定义）
                    content=content_arr[i].substr(0,50)+'...';//添加省略号并放进box文字内容后面
                    $(".box").eq(i).text(content);
                }else{
                    content=content_arr[i];
                    $(".box").eq(i).text(content);
                }
            }
        })

收起

展开全文

html jquery 网页设计

CSS中的单行、多行文本溢出总结
2022-01-15 20:57:38
多行文本溢出 一.用到的相关属性 1.white-space 这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。默认是normal。 ①white-space: nowrap...
文章目录

一.用到的相关属性
1.white-space
2.word-break
3.text-overflow:
4.`overflow`

二.单行文本溢出
三.多行文本溢出
一.用到的相关属性

1.white-space

这个属性是用来控制空白字符的显示的，同时还能控制是否自动换行。它有五个值：normal | nowrap | pre | pre-wrap | pre-line。默认是normal。

①white-space: nowrap:

不仅空格被合并，换行符无效，连原本的自动换行也没有了！只有<br>才能导致换行！所以可以理解为永不换行。

元素内文本如果有多个空格在一起或换行符，浏览器只会显示一个空格；元素文本内容不会自动换行，只有遇到标签才会换行；

②white-space:pre：

空格和换行符被保留，但不会有自动换行。pre其实是preserve的缩写。

保留空白或换行符（回车键）。输入几个空格，浏览器显示的时候就是几个空格，其实就是原样输出，如果有换行符，换行符后的内容会从下一行开始。

③white-space:pre-wrap：

显然pre-wrap就是preserve+wrap，保留空格和换行符，且可以自动换行。

④white-space:pre-line：

空格被合并了，但是换行符可以发挥作用，line应该是new line的意思，如果有换行符（回车键），换行符后的内容会从下一行开始，不会影响自动换行。所以pre-line其实是preserve``new line+wrap。

总结：
- normal：忽略多余的空白，只保留一个空白(默认)；不会影响自动换行（就是元素内容过长，在一行上显示不完，会从下一行开始）；
- pre：保留空白(行为方式类似于html中的pre标签)；
- nowrap：只保留一个空白，文本不会换行，会在在同一行上继续，直到遇到br标签为止。
- pre-wrap：保留空白符序列，正常地进行换行；
- pre-line：合并空白符序列，保留换行符；
- inherit：从父元素继承white-space属性的值。
是否能发挥作用换行符空格自动换行、nbsp;
normal × ×(合并) √ √
nowrap × ×(合并) × √
pre √ √ × √
pre-wrap √ √ √ √
pre-line √ ×(合并) √ √

注：

&nbsp：

在 html 里是空格占位符，普通的空格在 html 里如果连续的多个可能被认为只有一个，而这个东西你写几个就能占几个空格位。

2.word-break

这个属性是控制单词如何被拆分换行的。它有三个值：normal | break-all | keep-all。

①word-break:keep-all：

所有“单词”一律不拆分换行，注意，这里的“单词”包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格可以触发自动换行

②word-break:break-all：

所有单词碰到边界一律拆分换行，不管是incomprehensibilities这样一行都显示不下的单词，还是long这样很短的单词，只要碰到边界，都会被强制拆分换行。

③word-wrap（overflow-wrap）：

word-wrap又叫做overflow-wrap：这个属性也是控制单词如何被拆分换行的，实际上是作为word-break的互补，它只有两个值：normal | break-word。

只有当一个单词一整行都显示不下时，才会拆分换行该单词。

3.text-overflow:

text-overflow: clip | ellipsis,

默认值:clip;

适用于:所有元素

clip:当前对象内文本溢出时不显示省略标记(…),而是将溢出部分裁剪。

ellipsis:当对象内文本一处时显示省略标记(…)。

但需要与overflow:hidden; white-space:overflow;配合使用才能有效果。

4.overflow

overflow属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个常用的值：
- visible: 默认值。内容不会回修剪，可以呈现在元素框之外。
- hidden: 如果内容超出父级容器，超出部分将会被隐藏
- scroll: 无论是否超出容器，都会出现一个滚动条。
- auto: 如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。
使用 overflow 的前提

为使 overflow有效果，容器必须满足以下条件：
1. dispaly 的值非 inline 。
2. 具有尺寸限制。(width / height / max-width / max-height / absolute拉伸 )
3. 对于单元格 td 等,还需要 table 为 table-layout: fixed 才可以。
滚动条出现的条件

滚动条出现条件主要分为以下两种：
1. 使用 overflow 属性出现的滚动条
2. HTML 元素自带的，例如 <html> 和 <textarea> 属性。
默认滚动条是来自于 <html> 元素而不是 <body> 元素。滚动条也会占用用容器的可用宽度或者高度。

二.单行文本溢出

对于单行文本，使用单行省略：
```
{
    width: 200px;
    /*display: inline-block;  (有时候需要加)*/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
```
举例：

display: inline-block; 需要加的时候。

当需要将文本整块省略时，当直接使用平常的方案。
```
.person-card__desc {
    width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
```
结果如下：

将 display: inline 改为 display: inline-block 实现整块省略

如果需要实现一整块的省略，只需要将包裹整块标签元素的 span 的 display 由 inline 改为 inline-block 即可。
```
.person-card__desc span {
    display: inline-block;
}
```
三.多行文本溢出
```
{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
```
- -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
- display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
- -webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
- text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
收起
展开全文
css 前端
CSS实现单行、多行文本溢出显示省略号
2022-04-06 19:59:54

CSS实现多行文本溢出显示省略号 display: -webkit-box; // 设置弹性伸缩盒子模型 -webkit-box-orient: vertical; // 设置子元素排列方式 -webkit-line-clamp: 3; // 限制在一个块元素显示的文本行数

收起
如何实现单行／多行文本溢出的省略样式？
2022-03-24 19:51:50

多行文本溢出 二、实现方式单行文本溢出省略理解也很简单，即文本在一行内显示，超出部分以省略号的形式展现实现方式也很简单，涉及的css属性有： text-overflow：规定当文本溢出时，显示省略符号来代表被...

收起

css
用 css 或 js 实现多行文本溢出省略
2022-02-09 09:54:29

用 css 或 js 实现多行文本溢出省略 CSS： <div class="container"> <div class="single">单行：凡世的喧嚣和明亮,世俗的快乐和幸福,如同清亮的溪涧,在风里,在我眼前,汨汨而过,温暖如同泉水一样涌出来,...

收起

javascript css css3
多行文本溢出使用展开，隐藏
2021-05-25 19:50:39

多行溢出组件 <template> <div class="multiline-overflow-wrapper"> <input v-model="showall" class="exp" type="checkbox" /> <div class="text" :style="textStyleObject"> <...

收起
设置多行文本溢出隐藏
2021-05-01 13:11:30

CSS设置多行文本溢出隐藏效果

收起
CSS单行、多行文本溢出隐藏
2021-10-04 11:14:37

CSS单行、多行文本溢出隐藏 1.单行文本溢出隐藏 .class{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 在这里需要注意的是overflow只能作用于块级元素身上，如果我们对内联元素进行如上...

收起

css html html5
css处理单行，多行文本溢出
2021-07-28 16:51:30

多行文本溢出 p { position: relative; line-height: 1.5em; /*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/ height: 3em; overflow: hidden; } p:after { content: '...'; position: abso

收起

css
多行文本溢出显示省略号 - 纯css解决方案
2021-06-13 01:17:01

此方案支持IE，firefox，safari，chrome。效果如下 overview live demo 完整代码 Please change window size to make overflow Lorem ... 这是一个几乎全浏览器兼容的多行文本溢出的css解决方案，希望你能有所收获。

收起
CSS基础：单行和多行文本溢出显示省略号
千次阅读 2022-03-11 11:34:31

而这个放在CSS专栏聊，自然就会聊在CSS 中如何解决这个问题，在CSS中对于行数不同不可以分单行文本溢出和多行文本溢出。单行文本溢出如果解决文本溢出显示省略号，需要满足的三个条件：先强制一行内显示文本 ...

收起

css 省略号
纯CSS 多行文本溢出省略号
2021-06-13 01:15:51

单行文本溢出省略号一般我们都知道实现方法。.xxx {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}那么如果多行文本应该怎么做呢，伟大的chrome 又走在了时代前沿，可以使用-webkit-line-clamp这...

收起
单行文本溢和 多行文本溢出
2020-08-21 21:50:42

一、单行文本溢出最常见的使用，直接贴出代码...二、多行文本溢出 1. 基于谷歌浏览器实现： .text { display: -webkit-box; -webkit-box-orient: vertical; /* 表示盒子对象的子元素的排列方式 */ -webkit-line-cl

收起
多行文本溢出打点
2019-08-08 18:15:39

首先单行文本溢出打点方法（三件套） div{ width:100%; overfllow:hidden; text-overflow:ellipsis; white-space:nowrap; } -wenbkit-line-clamp文字占几行 box-orient 属性规定框的子元素应该被水平或垂直排列。...

收起
微信小程序多行文本溢出
2020-11-26 16:46:36

文本溢出单行文本溢出样式wxml结构wxss样式代码效果图多行文本溢出样式wxml结构wxss样式代码效果图此样式同样适用于html css,只是微信小程序和html结构元素标签不同单行文本溢出样式 wxml结构 <scroll-view ...

收起

css html css3
css 处理单行/多行 文本溢出
2021-02-20 11:40:38

在编写样式中，经常会出现一行或者多行文本显示不全，导致文本溢出的现象。可以通过如下方法解决： 1）单行溢出前提必须有宽度 width:300px;...2）多行文本溢出 因使用了WebKit的CSS扩展属性，该方法适用

收起

html css html5 css3
CSS处理多行文本溢出
2020-05-25 11:08:16

如果实现单行文本的溢出显示...但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法： display:-webkit-box; -we...

收起

css css3
单行或者多行文本溢出展示省略号的实现方法
2021-08-06 22:01:33

如果实现单行文本的...但是这个属性只支持单行文本的溢出显示省略号，如果我们要实现多行文本溢出显示省略号呢。接下来重点说一说多行文本溢出显示省略号，如下。实现方法： display: -webkit-box; -webkit-bo

收起
单行 / 多行文本溢出隐藏
2021-01-25 09:53:19

多行文本超出隐藏：在这里插入代码片 overflow:hidden;/*超出隐藏*/ text-overflow:ellipsis;/*文本溢出时显示省略标记*/ display:-webkit-box;/*设置弹性盒模型*/ -webkit-line-clamp:3; -webkit-box-orient:...

收起

css html css3
多行文本溢出隐藏显示省略号
2021-06-08 18:16:13

.txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; word-break: break-all; text-justify: newspaper...}.

收起

css html5 html
单行文本溢出隐藏、多行文本溢出隐藏，省略号代替
2022-03-21 15:03:18

单行文本溢出隐藏、多行文本溢出隐藏，省略号代替

收起

前端 javascript vue.js html html5
CSS - 纯CSS实现多行文本溢出省略（兼容所有浏览器)
2022-03-14 11:37:11

CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）</div> </div> .mutil-line-...

收起

css sass elementui
多行文本溢出显示省略号(…)
千次阅读 2021-07-05 16:31:33

多行展示以省略号(…)处理在开发过程中会出现大量文字展示情况，一般都会做超过几行，剩余部分按照省略号展示。单行展示 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 多行展示 WebKit...

收起

大前端 html5 css3

是否能发挥作用	换行符	空格	自动换行	、nbsp;
normal	×	×(合并)	√	√
nowrap	×	×(合并)	×	√
pre	√	√	×	√
pre-wrap	√	√	√	√
pre-line	√	×(合并)	√	√

CSS多行文本溢出省略显示

1、单行文本溢出省略显示

2、多行文本溢出省略显示

2.1 WebKit内核浏览器解决办法

2.2 其他浏览器解决方案

2.2.1 定位元素实现多行文本截断

vue实现移动端项目多行文本溢出省略

移动端的text-overflow多行文本溢出显示省略号(…)

CSS实现单行、多行文本溢出显示省略号（…）

多行文本溢出显示省略号

多行文本显示省略号有两种办法

第一种： 使用定位伪元素遮盖末尾文字

第二种办法： 利用旧版弹性盒

多行文本溢出问题的解决

多行文本溢出问题的解决

CSS中的单行、多行文本溢出总结

文章目录

一.用到的相关属性

1.white-space

2.word-break

3.text-overflow:

4.overflow

二.单行文本溢出

三.多行文本溢出

CSS实现单行、多行文本溢出显示省略号

如何实现单行／多行文本溢出的省略样式？

用 css 或 js 实现多行文本溢出省略

多行文本溢出使用展开，隐藏

设置多行文本溢出隐藏

CSS单行、多行文本溢出隐藏

css处理单行，多行文本溢出

多行文本溢出显示省略号 - 纯css解决方案

CSS基础： 单行和多行文本溢出显示省略号

纯CSS 多行文本溢出省略号

单行文本溢 和 多行文本溢出

多行文本溢出打点

微信小程序多行文本溢出

css 处理 单行/多行 文本溢出

CSS处理多行文本溢出

单行或者多行文本溢出展示省略号的实现方法

单行 / 多行文本溢出隐藏

多行文本溢出隐藏显示省略号

单行文本溢出隐藏、多行文本溢出隐藏，省略号代替

CSS - 纯CSS实现多行文本溢出省略（兼容所有浏览器)

多行文本溢出显示省略号(…)

多行文本溢出

第一种：使用定位伪元素遮盖末尾文字

第二种办法：利用旧版弹性盒

4.`overflow`

CSS基础：单行和多行文本溢出显示省略号

单行文本溢和多行文本溢出

css 处理单行/多行文本溢出