检测文本是否应用了text-ellipsis省略样式

最新推荐文章于 2024-06-24 13:32:02 发布
最新推荐文章于 2024-06-24 13:32:02 发布
阅读量1.3k 收藏
点赞数
分类专栏： html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014291497/article/details/83315489
版权

原文地址：https://justforuse.github.io/blog/zh-cn/2018/10/detect-text-ellipsis/

css提供了可以省略过长文字的样式：text-ellipsis: hidden，那么如何检测文本是否被省略呢？

如果有一个伪类，类似:placeholder-shown，比如：:ellipsis-shown，但是很现实并没有这个伪类，所以要想检测就必须使用js了。

所以只要比对文本实际长度和显示长度是否一致就可以知道是否被省略了，DOM提供了两个属性分别对应了两个长度：scrollWidth和offsetWidth。

示例地址（盗用别人的?）
https://codepen.io/triple-j/pen/wadKQB

justforuse
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
text-ellipsis:如果太长，请剪掉一根绳子
05-08
文字省略号 如果太长，请剪掉一根绳子 为什么 您总是想切断长字符串。 安装 $ npm install --save text-ellipsis 用法 var ellipsis = require ( 'text-ellipsis' ) ; var short = ellipsis ( 'a very long text' , 10 ) ; console . log ( short ) ; // "a very ..." var short = ellipsis ( 'a very long text' , 10 , { side : 'start' } ) ; console . log ( short ) ; // "...ng text" var short = ellipsis ( 'a very long text' , 10 , { ellipsis : ' END' }
vant4的TextEllipsis 文本省略，禁用展开，收起方法
qq_52335038的博客
04-02 1100
实现多行文本展示，规定大于3行，显示省略号...和查看全部按钮；（并且考虑兼容性问题）
JS如何判断文字被ellipsis了？
最新发布
2401_83384536的博客
06-24 824
如果想要文本超出宽度后用省略号省略，只需要加上以下的 css 就行了。如果我们想要当文本被省略的时候，也就是当文本超出指定的宽度后，鼠标悬浮在文本上面才展示popper，应该怎么实现呢？CSS帮我们搞定了省略，但是 JS 并不知道文本什么时候被省略了，所以我们得通过JS来计算。接下来，我将介绍几种方法来实现 JS 计算省略。我发现表格组件已经实现了这个功能，所以就先来学习一下它的源码。
TextEllipsis 文本缩略/展开
Minions_Fatman的博客
08-31 1301
<template> <view> <uni-navbar fixed="true" title="文本缩略显示&img自适应" backgroundColor="#4683ff" color="#ffffff"> <view slot='left' class="pd-l-20 nav_left" @click="navBack()"> <image src="/static/images/back2.png"></im
CSS3属性之text-overflow:ellipsis详解
m0_49515138的博客
01-13 4753
webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。2-2.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式。必须结合的属性 ，将对象作为弹性伸缩盒子模型显示。插件网站:http://dotdotdot.frebsite.nl/:当前对象内文本溢出时不显示省略标记(…
CSS+JS+Vue：单行、多行文本溢出显示省略号...的几种实现方式
weixin_43932309的博客
09-27 4382
背景：近期H5项目有个UI需求，单行文本超长时，超出的部分...省略且有一个查看的图标；否则正常展示。在此背景下了总结下文本溢出的几种实现方式。
Vue：HeyUI组件TextEllipsis超出文本省略
彭世瑜的博客
01-13 1364
实现的效果 目录 $ tree . ├── App.vue ├── Text.vue ├── main.js └── package.json package.json { "dependencies": { "eslint-plugin-vue": "^7.4.1", "heyui": "^1.28.0" } } main.js import Vue from "vue"; import App from "./App.vue"; import { install, Tex
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
09-25
综上所述，要实现文本溢出显示省略号的效果，应该将以下CSS样式应用于需要截断的元素： ```css overflow: hidden; text-overflow: ellipsis; white-space: nowrap; ``` 这些样式会告诉浏览器，如果内容超出元素的...
使用text-overflow:ellipsis实现文字超出用省略号显示
09-25
例如，通过JavaScript可以获取到容器的实际宽度和内部文本的实际长度，从而在文本末尾手动插入省略号，而不必依赖于CSS的 `text-overflow` 属性。 对于文章开头提到的“感兴趣的朋友可以参考下”的示例，可能是指在...
HTML超出文本显示省略号...通过text-overflow实现
09-28
`text-overflow`是一个非常实用的样式规则，它可以控制当元素内的文本溢出其边界时如何处理。在标题和描述中提到的，这个功能在展示新闻列表等场景中特别常见，因为它能够有效地节省空间并引导用户点击以查看完整...
无hack无js全兼容text-overflow-ellipsis效果
09-27
标题中的"无hack无js全兼容text-overflow-ellipsis效果"指的是在网页设计中实现文本溢出时显示省略号的效果，而且这个方法无需使用JavaScript（js）或任何黑客(hack)技巧，并且能够兼容各种浏览器。`text-overflow: ...
前端常用样式：弹性布局
谢同学的博客
10-26 650
// 弹性布局 - 横向 .flex-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; .
如何判断ellispsis生效了
GAMELOFT9----纸上得来终觉浅，绝知此事要躬行
08-07 1824
主要内容 要让文本超过长度后，截取显示并附上省略号，可以通过如下的css代码实现： text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width:100px; 有时候，我们需要根据文本是否省略做一些别的事情，例如显示一个展开按钮。现在是CSS控制文本省略了，如何检测到呢？ 废话不多说，直接通过文本元素的clie...
小程序text ellipsis
lfkabb的博客
05-17 1166
在小程序中，一般用到的文字标签是view 和text 。如果要用到控制行数（比如控制文本显示2行，多余的省略号代替），则整个文本用 text标签，然后添加主要样式： display: -webkit-box; overflow: hidden; -webkit-line-clamp:2; -webkit-box-orient: vertical; text-overflow...
判断设置了过长显示省略号css样式的元素是否出现了省略号
psh305的博客
05-07 1093
其中scrollWidth为元素在没有滚动条时，元素的总宽度(包含padding)，offsetWidth为元素的clientWidth+滚动条+边框。单行时：判断元素scrollWidth与offsetWidth，若大于，则显示了省略号，反之没有；多行时：判断元素scrollHeight与offsetHeight，比较过程同单行；
JS判断元素是否出现了省略号，即文本内容的宽度是否超过了元素的宽度
細水、長流√的专栏
12-24 4784
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 500px; .
vant TextEllipsis 组件实现文字省略 主要代码
kilito_01的博客
08-25 981
【代码】vant TextEllipsis 组件实现文字省略 主要代码。
text-overflow: ellipsis加display flex失效
07-27
你好！关于你的问题，当使用 `display: flex` 时，`text-overflow: ellipsis` 的效果可能失效。这是因为 `text-overflow` 属性只对块级元素生效，而 `flex` 容器默认是一个行内块元素。 为了解决这个问题，你可以将包含文本的元素设置为块级元素，然后再将其设置为 `display: flex`。这样就能同时实现 `text-overflow: ellipsis` 和 `display: flex` 的效果。 以下是一个示例代码： ```html <style> .flex-container { display: flex; /* 其他 flex 相关样式 */ } .text-ellipsis { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> <div class="flex-container"> <div class="text-ellipsis"> 这是一段可能会超出容器宽度的文本内容 </div> </div> ``` 通过将文本所在的元素设置为 `display: block`，然后再使用 `text-overflow: ellipsis` 进行省略处理，再将其放置在 `display: flex` 的容器中，就可以同时实现两个效果了。 希望这能帮到你！如果还有其他问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值