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.超过元素宽高省略
.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>

整体代码

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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848632.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

选择核密度估计带宽LSCV与DPI方法对比

最小二乘交叉验证&#xff08;Least Squares Cross-Validation, LSCV&#xff09;和直接插入法&#xff08;Direct Plug-in, DPI&#xff09;是两种常用于选择核密度估计带宽的方法。 原理与定义 最小二乘交叉验证&#xff08;LSCV&#xff09; 原理&#xff1a;通过交叉验证…

二叉树的中序遍历-力扣

二叉树的中序遍历&#xff0c;指首先遍历左节点&#xff0c;然后遍历中间节点&#xff0c;最后遍历右节点&#xff0c;按照这个顺序进行递归即可。 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* …

【前端】JS示例:实现在一个数组(arrSstd)中查找基于uapid的值,并根据该值是否存在来决定是更新roleid还是添加新数据

要实现在一个数组&#xff08;arrSstd&#xff09;中查找基于uapid的值&#xff0c;并根据该值是否存在来决定是更新roleid还是添加新数据&#xff0c;你可以使用Array.prototype.find或Array.prototype.findIndex方法来检查是否存在具有特定uapid的对象。如果找到&#xff0c;…

GraphQL(5):使用Mutations修改数据

GraphQL中的使用Mutation查询&#xff0c;下面介绍详细操作&#xff0c;新建一个mutation.js文件。 1 定义schema 1.1 定义模型对象 &#xff08;1&#xff09;定义输入模型 input AccountInput {name: Stringage: Intsex: Stringdepartment: String} &#xff08;2&#xf…

攻防世界---misc---Ditf

1、题目描述&#xff0c;下载附件&#xff0c;是一张图片 2、打开图片&#xff0c;发现宽高不一样&#xff0c;猜测可能是需要修改宽高&#xff0c;用winhex分析&#xff0c;没有发现奇怪的地方 3、用kali中的binwalk命令&#xff0c;分析图片&#xff0c;发现有个压缩包&#…

基于SpringBoot+Vue二手家电管理平台设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…

【Python基础知识】安装第三方库的两种方式——在线与离线

在线 电脑有网络的情况下&#xff0c;直接换镜像&#xff0c;然后pip install就行。 离线 我遇到了一种情况是&#xff0c;学校里的服务器连不上网&#xff0c;导致没法在线pip install&#xff0c;所以只能通过离线的方式下载。步骤如下&#xff1a; 找一台有网络的电脑&a…

va_start和va_end使用介绍

一 概述 采用C语言编程的时候&#xff0c;函数中形式参数的数目通常是确定的&#xff0c;在调用时要依次给出与形式参数对应的所有实际参数。但在某些情况下希望函数的参数个数可以根据需要确定。典型的例子有大家熟悉的函数printf()、scanf()和系统调用execl()等。那么它们是怎…

Python语言分为:深度解析Python的四大维度、五大特色、六大应用场景及七大发展趋势

Python语言分为&#xff1a;深度解析Python的四大维度、五大特色、六大应用场景及七大发展趋势 Python&#xff0c;作为当今最受欢迎的编程语言之一&#xff0c;其广泛的应用领域和独特的语言特性使其成为编程领域的明星。本文将从四个方面、五个方面、六个方面和七个方面&…

基于jeecgboot-vue3的Flowable流程-待办任务(一)

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、ToDo.data.ts的数据信息如下 import {BasicColumn} from //components/Table; import {FormSchema} from //components/Table; import { rules} from //utils/helper/validator; impor…

Hyper-V 安装 CentOS Stream 9【图文教程】

文章目录 准备工作:选择 CentOS 版本第 1 步:下载官方下载阿里云镜像下载第 2 步:创建虚拟机第 3 步:安装虚拟机修改安全配置安装虚拟机配置网路第 4 步:使用 SSH 连接查看 IP 地址使用 SSH 连接参考🚀 目标:通过 Hyper-V 在本地搭建一个 CentOS 虚拟机。 准备工作:选…

c# iText使用

引入包 用nuget安装itext和itext.bouncy-castle-adapter包&#xff1a; 创建pdf string path "a.pdf"; PdfWriter writer new PdfWriter(path); PdfDocument pdfDoc new PdfDocument(writer); var docnew Document(pdfDoc); Paragraph p new Paragraph(&quo…

Python03:python代码初体验2

1、变量命名规范 1&#xff09;字母&#xff08;Unicode字符&#xff09;、数字、下划线&#xff0c;不能使用特殊字符&#xff0c;数字不能开头 2&#xff09;变量名是区分大小写的&#xff08;大小写敏感&#xff0c;x和X是两个不同的变量名&#xff09; 3&#xff09;不能使…

【打印功能】js简单实现表格样式的数据打印,按样式打印出来

效果图 代码部分&#xff0c;简单三步 1&#xff0c;html部分&#xff1a;写一个表格&#xff0c;然后数据填进去 <div id"printable-area" v-show"false"><div><div style"text-align: center;height: 40px;line-height: 40px;font…

语音深度鉴伪识别项目实战:基于深度学习的语音深度鉴伪识别算法模型(三)音频去噪算法大全+Python源码应用

前言 深度学习技术在当今技术市场上面尚有余力和开发空间的&#xff0c;主流落地领域主要有&#xff1a;视觉&#xff0c;听觉&#xff0c;AIGC这三大板块。 目前视觉板块的框架和主流技术在我上一篇基于Yolov7-LPRNet的动态车牌目标识别算法模型已有较为详细的解说。与AIGC相…

IDEA快捷生成左边变量,取消final关键字

一&#xff1a;问题 如图&#xff1a;每次使用CtrlALtV或.var自动生成左边变量都会有final关键字&#xff0c;然后需要删除很麻烦 二&#xff1a;解决 以下步骤设置取消生成final关键字 1.先 生成变量&#xff1a;我是使用.var自动生成左边变量 2.使用快捷键ALtshiftO或者点…

安全测试 之 安全漏洞: ClickHiJacking

1. ClickHiJacking 定义 点击劫持&#xff08;Click Jacking&#xff09;是一种视觉上的欺骗手段&#xff0c;攻击者通过使用一个透明的iframe&#xff0c;覆盖在一个网页上&#xff0c;然后诱使用户在该页面上进行操作&#xff0c;通过调整iframe页面的位置&#xff0c;可以使…

停止在你的数据库中使用UUID

在数据库中唯一标识行的最常见方法之一是使用UUID字段。然而&#xff0c;这种方法带来了需要注意的性能问题。 本文将讨论在使用UUID作为数据库表中的键时可能出现的两个性能问题。 我们直接进入正题&#xff01; 什么是UUID&#xff1f; UUID代表通用唯一标识符&#xff08;Un…

做个简单的电脑桌面窗体插件,通过.exe执行命令就可以执行

做个简单的电脑桌面窗体插件&#xff0c;通过.exe执行命令就可以执行 步骤一&#xff1a;安装所需的库步骤二&#xff1a;创建一个简单的PyQt5应用步骤三&#xff1a;保存并运行步骤四&#xff1a;打包为可执行文件总结 我们可以使用Python和PyQt5来创建一个简单的桌面窗体应用…

SwiftUI中ScrollViewReader的使用(自动滚动ScrollView)

ScrollViewReader是我最喜欢的SwiftUI新版本的新功能之一。在iOS 14发布之前&#xff0c;控制ScrollView的滚动位置并不容易。如果希望滚动视图滚动到特定位置&#xff0c;我们必须找到自己的解决方案。 使用ScrollViewReader&#xff0c;只需几行代码&#xff0c;就可以使滚动…