css文字超出元素省略,单行、多行省略

效果图:

通用CSS

  .box {width: 500px;border: 1px solid red;padding: 10px;line-height: 24px;}

1.单行省略

.singe-line {text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;}<p>单行省略</p><div class="singe-line box" :title="content">{{ content }}</div>

2.两行省略

.double-line {word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}<p>两行省略</p><div class="box"><div class="double-line" :title="content2">{{ content2 }}</div></div>

3.超过元素宽高省略

需要设置元素宽度与高度,根据高度看下最多能放几行,再设置-webkit-line-clamp的值为最大行数

.over-line {height: 65px;word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}<p>超过元素宽高省略</p><div class="box"><div class="over-line" :title="content">{{ content }}</div></div>

4.字符截取省略

通常应用于文章列表的内容简介,通过截取固定字符数量来展示,也需要指定宽高

.assign-line {height: 45px;word-break: break-all;
}methods: {handleontent() {this.content3 = `${this.content.substring(0, 80)} ...`this.content4 = `${this.content2.substring(0, 80)} ...`}}<p>字符截取省略</p><div class="box"><div class="assign-line" :title="content">{{ content3 }}</div></div><div class="box"><div class="assign-line" :title="content">{{ content4 }}</div></div>

代码原文,在Vue中写的

<template><div class="ellipsis-contanier"><h2>超过指定行显示省略号</h2><p>单行省略</p><div class="singe-line box" :title="content">{{ content }}</div><p>两行省略</p><div class="box"><div class="double-line" :title="content2">{{ content2 }}</div></div><p>三行省略</p><div class="box"><div class="three-line" :title="content">{{ content }}</div></div><p>超过元素宽高省略</p><div class="box"><div class="over-line" :title="content">{{ content }}</div></div><p>字符截取省略</p><div class="box"><div class="assign-line" :title="content">{{ content3 }}</div></div><div class="box"><div class="assign-line" :title="content">{{ content4 }}</div></div></div>
</template><script>export default {data () {return {content: 'ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:',content2: 'vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。',content3: '',content4: ''}},created(){this.handleontent()},methods: {handleontent() {this.content3 = `${this.content.substring(0, 80)} ...`this.content4 = `${this.content2.substring(0, 80)} ...`}}
}
</script><style lang="less" scoped>
.ellipsis-contanier {.box {width: 500px;border: 1px solid red;padding: 10px;line-height: 24px;}.singe-line {text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap;}.double-line {word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}.three-line {word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.over-line {height: 65px;word-break: break-all;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}.assign-line {height: 45px;word-break: break-all;}
}
</style>

css文字超出元素省略,单行、多行省略相关推荐

css案例10——单行文本省略、多行省略
一.案例描述 1.默认: 2.单行省略 3.多行省略二.案例代码 <!DOCTYPE html> <html><head><meta charset=&qu ...
【CSS】css文字超出显示省略号/文字超过三行显示省略号..
单行 .p1{/*单行*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 多行 .p2{/*多行*/overflow: hidd ...
css文字超出宽度自动换行
CSS文字超出宽度自动换行[转] word-wrap:break-word; word-break:break-all; overflow: hidden;/*这个参数根据需求来决定要不要*/ 目录 ...
CSS文字超出部分省略号显示
文章目录[隐藏] CSS 文字超出部分省略号显示前言 CSS 文字超出部分省略号显示实现方法 CSS 文字超出部分省略号显示实现效果 CSS 文字超出部分省略号显示前言在我们开发过程中,其实有这样的 ...
css文字超出部分省略号
css文字超出部分省略号 overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
CSS内容超出元素高度滚动，并且滚动条隐藏
CSS内容超出元素高度滚动,并且滚动条隐藏给父元素设置宽度,溢出隐藏,子元素设置 // html <div class="box"><div class=&qu ...
css 文字超出显示省略号
css 文字超出显示省略号 <html> <style type="text/css">div{width: 100px;overflow: hidden; ...
css React 单行省略和多行省略
单行省略 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; 多行省略 ove ...
CSS单行省略和多行省略
1.单行省略: text-overflow: ellipsis;overflow: hidden;word-break: break-all;white-space: nowrap; 2.多行省略 o ...

css文字超出元素省略,单行、多行省略

1.单行省略

2.两行省略

3.超过元素宽高省略

4.字符截取省略

css文字超出元素省略,单行、多行省略相关推荐

最新文章

热门文章