单行文字、多行文字溢出省略号显示

最新推荐文章于 2024-03-12 13:07:22 发布

鸭绒

最新推荐文章于 2024-03-12 13:07:22 发布

阅读量262

点赞数 1

本文链接：https://blog.csdn.net/weixin_43334673/article/details/107310314

版权

布局效果专栏收录该内容

29 篇文章 5 订阅

订阅专栏

文章目录

- - 1.单行文本
  - 2. 多行文字

1.单行文本

满足三个条件：

强制在一行内显示文本
超出的部分隐藏
文字用省略号代替超出的部分

转换为代码：

	/*条件一*/
	white-space:nowrap;
	/*条件二*/
	overflow:hidden;
	/*条件三*/
	text-overflow:ellipsis;

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>省略号</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      p {
        display: block;
        height: 30px;
        width: 150px;
        line-height: 30px;
        background-color: gray;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <p>
      提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
    </p>
  </body>
</html>

在这里插入图片描述
注意：要想出现省略号，一个合适的宽度也是必须的。宽度过大，它能装下所有文字，自然不会出现省略号。

2. 多行文字

满足下面条件：

溢出隐藏
超出部分省略号显示
弹性伸缩盒子显示
限制在一个块元素显示的文本行数
设置伸缩盒子对象的子元素的排列方式

转换代码：

	/*条件一*/
	overflow:hidden;
	/*条件二*/
	text-overflow:ellipsis;
	/*条件三*/
	display:-webkit-box;
	/*条件四*/
	-webkit-line-clamp:2;
	/*条件五*/
	-webkit-box-orient:vertical;

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>省略号</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        display: -webkit-box;
        width: 100px;
        height: 66px;
        background-color: gray;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div>
      提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
      提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
      提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
    </div>
  </body>
</html>

在这里插入图片描述
注意：盒子的高度也很重要，如果过大，则会显示第四(…)行。

例如，我将盒子高度设置为80px：
在这里插入图片描述
省略号下面的行还会显示，所以高度设置是很重要的。

多行显示在不同浏览器存在兼容性问题，因此更好的是让后端来实现多行文字省略号效果。

鸭绒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
单行文字、多行文字溢出省略号显示

文章目录1.单行文本2. 多行文字1.单行文本满足三个条件：强制在一行内显示文本超出的部分隐藏文字用省略号代替超出的部分转换为代码： /*条件一*/ white-space:nowrap; /*条件二*/ overflow:hidden; /*条件三*/ text-overflow:ellipsis;示例：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF
复制链接

扫一扫

专栏目录