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,一经查实,立即删除!

相关文章

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;还…

va_start和va_end使用介绍

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

基于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…

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…

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

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

SD NAND(贴片式TF卡)坏块管理技术问答

Q1:什么是NAND的块(Block))? 每个Nand包含一个或多个Chip。Chip是可以独立执行命令并上报状态的最小单元。 每个Chip包含一个或多个plane。不同的plane间可以并发操作&#xff0c;不过有一些限制。 每个plane包含多block&#xff0c;block是最小擦除单元&#xff08;擦除后为…

一文了解如何安全有效的进行PB级别的大数据迁移

在这个信息量爆炸的时代&#xff0c;处理PB级别的数据转移已成为常态&#xff0c;但对企业而言&#xff0c;这仍然是一个充满挑战的任务。今天&#xff0c;我们来探讨一下这个话题&#xff0c;看看在进行PB级数据转移时&#xff0c;需要留意哪些事项&#xff0c;可能会遇到哪些…

B端数据看板,其实数据可以更美的。

B端数据看板可以通过设计来提升其美观度。 色彩和配色方案&#xff1a; 选择适合品牌和数据类型的色彩搭配方案。使用渐变色、明亮的色调和对比度来突出重要的数据指标。 数据可视化&#xff1a; 使用图表、图形和数据图像来呈现数据&#xff0c;使其更易于理解和解读。选择…

报考PMP机构,主打一个听劝

近期PMP报考着实是火了一把&#xff0c;看到身边很多的朋友都考了PMP&#xff0c;搞得我心头痒痒的&#xff0c;后来了解了一下大家报考PMP的初衷&#xff0c;大家都是为了自我提升和升职加薪&#xff0c;有的人拿到PMP证书已经实现了升职加薪了。身边的朋友都劝我去考PMP证书&…

基于STC89C52单片机空气PM2.5系统设计资料

#include <reg52.h>#include <intrins.h>#define uint unsigned int#define uchar unsigned char //宏定义sbit RSP1^6;//液晶接口sbit ENP1^7;sbit LED P2^0;//粉尘传感器控制接口sbit ADCS P3^7;//AD0832接口sbit ADCLK P3^5;sbit ADDI P3^6;sbit ADDO P3^6;…

线性dp+数论分块,1561D1 - Up the Strip

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 1561D1 - Up the Strip (simplified version) 二、解题报告 1、思路分析 一眼dp 写出dp方程&#xff1a; 前者维护前缀和即可O(1)转移 后者呢&#xff1f;——整除分块数论分块问题-CSDN博客 简单叙述下…

Day15:二叉树层序遍历 LeedCode 102.二叉树的层序遍历 199二叉树的右视图 637.二叉树的层平均值 101.对称二叉树 226.翻转二叉树

详细讲解,点击跳转 102. 二叉树的层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&#xff09;。 示例 1&#xff1a; 输入&#xff1a;root [3,9,20,null,null,15,7] 输出&#xff1a;[[3]…