文本溢出打点显示

风哑

已于 2022-10-29 16:39:36 修改

阅读量505

点赞数 1

分类专栏：前端_css效果文章标签： css html

于 2022-03-23 20:48:40 首次发布

本文链接：https://blog.csdn.net/A_Common_Man/article/details/123695557

版权

前端_css效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言：文本溢出打点的代码总是忘记，特意在此记录一下

单行文本溢出打点

先看效果：

再放代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
	        p{
				width: 300px;
				height: 20px;
				line-height: 20px;
				border: 1px solid black;
				white-space: nowrap;   /* 使文本溢出不换行*/
				overflow: hidden;  /* 溢出部分砍断隐藏 */
				text-overflow: ellipsis;    /* 溢出部分打点展示*/
			}
    </style>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis quasi sint nostrum veniam saepe mollitia dolorem alias aspernatur explicabo autem eius recusandae doloribus vitae quo qui ab asperiores tempora fugiat.</p>
	</body>
</html>

多行文本溢出打点

先看效果：

再放代码：

<!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>
    .box {
      width: 400px;
      height: 60px; /*必填*/
      line-height: 20px;
      border: 1px solid #000;
      /* 将对象作为弹性伸缩盒子模型显示 */
      display: -webkit-box;  
      /* 设置或检索伸缩盒对象的子元素的排列方式 */
      -webkit-box-orient: vertical;   
      /* 设置打点显示的行数 */
      -webkit-line-clamp: 2; 
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div class="box">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit dignissimos ipsum, quidem nesciunt ipsa minus. Illum
    minima cum vel quisquam, laboriosam quidem quas natus. Sed vitae odio illum libero. Possimus?Lorem ipsum dolor, sit
    amet consectetur adipisicing elit. Velit dignissimos ipsum, quidem nesciunt ipsa minus. Illum minima cum vel
    quisquam, laboriosam quidem quas natus. Sed vitae odio illum libero. Possimus?
  </div>
</body>

</html>