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

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

效果图:

通用CSS.box{width:500px;border:1pxsolidred;padding:10px;line-height:24px;}
1.单行省略.singe-line{text-overflow:ellipsis;overflow:hidden;word-break:break-all;white-space:nowrap;}<p>单行省略</p><divclass="singe-linebox":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><divclass="box"><divclass="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><divclass="box"><divclass="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><divclass="box"><divclass="assign-line":title="content">{{content3}}</div></div><divclass="box"><divclass="assign-line":title="content">{{content4}}</div></div>代码原文,在Vue中写的
<template><divclass="ellipsis-contanier"><h2>超过指定行显示省略号</h2><p>单行省略</p><divclass="singe-linebox":title="content">{{content}}</div><p>两行省略</p><divclass="box"><divclass="double-line":title="content2">{{content2}}</div></div><p>三行省略</p><divclass="box"><divclass="three-line":title="content">{{content}}</div></div><p>超过元素宽高省略</p><divclass="box"><divclass="over-line":title="content">{{content}}</div></div><p>字符截取省略</p><divclass="box"><divclass="assign-line":title="content">{{content3}}</div></div><divclass="box"><divclass="assign-line":title="content">{{content4}}</div></div></div></template><script>exportdefault{data(){return{content:'ESLintisatoolforidentifyingandreportingonpatternsfoundinECMAScript/JavaScriptcode,withthegoalofmakingcodemoreconsistentandavoidingbugs.Inmanyways,itissimilartoJSLintandJSHintwithafewexceptions:',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><stylelang="less"scoped>.ellipsis-contanier{.box{width:500px;border:1pxsolidred;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>2024-09-04