css实现多行文本溢出显示省略号

最新推荐文章于 2024-05-08 17:27:33 发布

kim先生

最新推荐文章于 2024-05-08 17:27:33 发布

阅读量224

点赞数

分类专栏： Css

本文链接：https://blog.csdn.net/weixin_43025823/article/details/87935743

版权

Css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	*{margin:0;padding:0;}
	.textOverflow{
		margin: 20px auto;
		width: 200px;
		border: 1px solid red;
		word-break: break-all;		   /** word-break 属性规定自动换行的处理方法，允许在单词内换行 **/
		text-overflow: ellipsis;       /** 文字超出显示省略号 **/
		display: -webkit-box;          /** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		-webkit-line-clamp: 2;         /** 显示的行数 **/
		overflow: hidden;              /** 隐藏超出的内容 **/
    }   
  </style>
 </head>
 <body>
  <div class="textOverflow">
	word-break 属性规定自动换行的处理方法，允许在单词内换行
  </div>
 </body>
</html>

效果：
在这里插入图片描述

概括：
word-break 属性规定自动换行的处理方法

normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行

box-orient：horizontal | vertical | inline-axis | block-axis

horizontal：设置弹性盒对象的子元素从左到右水平排列
vertical：设置弹性盒对象的子元素从上到下纵向排列
inline-axis：设置弹性盒对象的子元素沿行轴排列
block-axis：设置弹性盒对象的子元素沿块轴排列

-webkit-line-clamp是webkit的私有属性，是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式

kim先生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现多行文本溢出显示省略号

上代码：&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"&gt; &lt;meta name="Aut
复制链接

扫一扫

专栏目录