CSS控制文本内容一行或多行超出部分显示省略号

最新推荐文章于 2024-04-26 16:52:43 发布

无良小老板

最新推荐文章于 2024-04-26 16:52:43 发布

阅读量2.1k

点赞数 3

分类专栏： HTML5 文章标签： css3 css html5

本文链接：https://blog.csdn.net/yuyunbai0917/article/details/124578735

版权

HTML5 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

CSS控制文本内容一行或多行超出部分显示省略号

效果展示

在写前端页面时，通常会遇到文字超出后显示省略号

在这里插入图片描述

单行文本超出显示省略号

p{
    width: 200px;
    height: 100px;
    border: 1px solid black;
   /* 强制超出不换行 */
   white-space: nowrap;
   /* 超出隐藏 */
   overflow: hidden;
   /* 文本超出显示成... */
   text-overflow: ellipsis;
}

多行文本超出显示省略号

div{
   padding: 0 10px;
   width: 200px;
   /* 不定义高度 */
   /* height: 200px; */
   border: 1px #000000 solid;
   /* 文本超出显示成... */
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   /* 设置可显示的行数 */
   -webkit-line-clamp: 4;
   overflow: hidden;
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文本超出显示省略号</title>
    <style type="text/css">
       p{
           width: 200px;
           height: 100px;
           border: 1px solid black;
		   /* 强制超出不换行 */
		   white-space: nowrap;
		   /* 超出隐藏 */
		   overflow: hidden;
		   /* 文本超出显示成... */
          text-overflow: ellipsis;
       }
	   div{
		   padding: 0 10px;
		   width: 200px;
		   /* 不定义高度 */
		   /* height: 200px; */
		   border: 1px #000000 solid;
		   /* 文本超出显示成... */
		   text-overflow: ellipsis;
		   display: -webkit-box;
		   -webkit-box-orient: vertical;
		   /* 设置可显示的行数 */
		   -webkit-line-clamp: 4;
		   overflow: hidden;
	   }
    </style>
</head>
<body>
	<!-- 单行文本超出显示省略号 -->
    <p>把很长的一段文本中溢出的内容隐藏，出现省略号</p>
	<!-- 多行文本超出显示省略号 -->
	<div>
		大国青年什么样？他们用青春改变祖国，义无反顾；他们把青春热血融进祖国山河；他们用青春把不可能变为可能，还有的他们永远留在了青春里！
	</div>
</body>
</html>