CSS 中省略号的几种写法
CSS 中省略号的几种写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省略号的四种写法</title>
<style>
p {
width: 80%;
margin: auto;
}
.prg {
height: 20px;
line-height: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*
white-space
设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符，默认值为 normal
normal 默认，空白会被浏览器忽略
pre 空白会被浏览器保留，其行为方式类似 HTML 中的 <pre> 标签
nowrap 文本不会换行，文本会在同一行上继续，知道遇到 <br> 标签为止
pre-wrap 保留空白符序列，但是正常地进行换行
pre-line 合并空白符序列，但是保留换行符
inherit 规定应该从父元素继承 white-space 属性的值
text-overflow
规定当文本溢出包含元素时发生的事情 默认值为 clip
clip 修剪文本
elipsis 显示省略符号来代表被修剪的文本
string 使用给定的字符串来代表被修剪的文本
*/
.prg1 {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
height: 60px;
line-height: 20px;
}
.prg1::after {
content: '...';
padding-left: 3px;
position: absolute;
top: 20px;
left: 0;
display: block;
height: 20px;
width: 20px;
background: #fff;
}
.prg2 {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
}
/*
-webkit-line-clamp
是一个不规范的属性，还没有出现在 CSS 规范草案中
限制一个块元素显示的文本行数，为了实现该效果，它需要组合其他外来的Webkit属性，
常见的属性：display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
text-overflow 可以用来多行文本的情况下，用省略号... 隐藏超出范围的文本。
*/
</style>
</head>
<body>
<h3>单行省略...</h3>
<p class="prg">前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>
<h3>多行省略...</h3>
<p class="prg1">前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>
<h3>多行省略...</h3>
<p class="prg2">前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>
<h3>多行省略...</h3>
<p class="prg3">前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>
</body>
<script>
(function(w) {
const shortLine = function(pragrafsClass, number) {
const prgs = document.getElementsByClassName(pragrafsClass);
for (let i = 0; i < prgs.length; i++) {
let contents = prgs[i].textContent;
if (contents.length >= number) {
let strs = contents.slice(0, number)
prgs[i].textContent = strs + "..."
}
}
}
w.shortLine = shortLine
})(window)
window.shortLine('prg3', 18)
</script>
</html>