css - 文本溢出省略

单行

 @mixin text_ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行省略

 @mixin text_ellipsis_n($n: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $n;
  overflow: hidden;
}

ie

 @mixin text_ellipsis_n($n: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $n;
  overflow: hidden;
}

float布局

 <!--
 * @createDate: 2022-07-08 16:05:02
 * @Author: zclee
 * @LastEditTime: 2022-07-08 16:10:19
 * @LastEditors: zclee
 * @FilePath: \lee-vue-press\cnblog\css - 文本溢出省略.html
 * @Description: 
-->
<!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>
  </head>
  <style>
    .height-fixed {
      height: 40px;
      overflow: hidden;
      line-height: 20px;
    }
    .height-fixed .text {
      float: right;
      width: 100%;
      margin-left: -5px;
      word-break: break-all;
    }
    .height-fixed::before {
      float: left;
      width: 5px;
      content: '';
      height: 100%;
    }
    .height-fixed::after {
      float: right;
      content: '...';
      height: 20px;
      line-height: 20px;
      width: 16px;
      /* 40 = 省略号长度 + padding-left长度 */
      margin-left: -40px;
      padding-left: 24px;
      /* 真实长度 小于等于5 */
      padding-right: 5px;
      position: relative;
      left: 100%;
      top: -20px;
      background: -webkit-linear-gradient(left, transparent, #fff 50%);
      background: -o-linear-gradient(right, transparent, #fff 50%);
      background: -moz-linear-gradient(right, transparent, #fff 50%);
      background: linear-gradient(to right, transparent, #fff 50%);
    }
  </style>
  <body>
    <div class="height-fixed">
      <div class="text">
        这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很
        长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长
      </div>
    </div>
  </body>
</html>

posted @ 2022-07-08 20:01 zc-lee 阅读(43) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

公告

zc-lee.github.io

昵称： zc-lee
园龄： 6年1个月
粉丝： 199861
关注： 8865

+加关注

2025年3月

日

一

二

三

四

五

六

zc-lee

lee1384@163.com

css - 文本溢出省略

css - 文本溢出省略

单行

多行省略

ie

float布局

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (391)

随笔档案 (253)

文章分类 (16)

文章档案 (19)

lee

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	@mixin text_ellipsis() {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	@mixin text_ellipsis_n($n: 2) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $n;
	overflow: hidden;
	}

	<!--
	* @createDate: 2022-07-08 16:05:02
	* @Author: zclee
	* @LastEditTime: 2022-07-08 16:10:19
	* @LastEditors: zclee
	* @FilePath: \lee-vue-press\cnblog\css - 文本溢出省略.html
	* @Description:
	-->
	<!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>
	</head>
	<style>
	.height-fixed {
	height: 40px;
	overflow: hidden;
	line-height: 20px;
	}
	.height-fixed .text {
	float: right;
	width: 100%;
	margin-left: -5px;
	word-break: break-all;
	}
	.height-fixed::before {
	float: left;
	width: 5px;
	content: '';
	height: 100%;
	}
	.height-fixed::after {
	float: right;
	content: '...';
	height: 20px;
	line-height: 20px;
	width: 16px;
	/* 40 = 省略号长度 + padding-left长度 */
	margin-left: -40px;
	padding-left: 24px;
	/* 真实长度小于等于5 */
	padding-right: 5px;
	position: relative;
	left: 100%;
	top: -20px;
	background: -webkit-linear-gradient(left, transparent, #fff 50%);
	background: -o-linear-gradient(right, transparent, #fff 50%);
	background: -moz-linear-gradient(right, transparent, #fff 50%);
	background: linear-gradient(to right, transparent, #fff 50%);
	}
	</style>
	<body>
	<div class="height-fixed">
	<div class="text">
	这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很
	长这段文字很长这段文字很长这段文字很长这段文字很长这段文字很长
	</div>
	</div>
	</body>
	</html>