H5页面设置文本超过两行时显示省略号失效

最新推荐文章于 2025-04-29 11:35:54 发布

周凤伟

最新推荐文章于 2025-04-29 11:35:54 发布

阅读量919

点赞数 1

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_44139784/article/details/109291818

版权

前端专栏收录该内容

21 篇文章

订阅专栏

在下面的代码中加行注释就可以了

<div>在需要显示省略号的文本的标签内加上下面代码</div>

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box;
/*! autoprefixer: off */
-webkit-box-orient:vertical;
-webkit-line-clamp:2;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

周凤伟

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html5数据超出显示省略号,h5文字超出，两行显示，超出显示省略号

weixin_39987926的博客

06-07

2270

最近接到一个需求，要求商场导航里的文字最多显示两行，超出两行的省略号显示，查一些资料，又根据自己的需求，改了很多，直接上代码吧.main{width: 360px;border: 1px solid #ccc;overflow: hidden;}.child{float: left;height: 40px;overflow: hidden;padding: 10px;background-col...

移动端原生H5开发

谢鑫的博客

07-26

1996

移动端原生H5开发配置项 1. Viewport  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- 针对一些不识...

参与评论您还未登录，请先登录后发表或查看评论

h5文字超出，两行显示，超出显示省略号

weixin_42398560的博客

07-06

1532

h5文字超出，两行显示，超出显示省略号 最近接到一个需求，要求商场导航里的文字最多显示两行，超出两行的省略号显示，查一些资料，又根据自己的需求，改了很多，直接上代码吧 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

前端设置三行文本省略号，失效为什么？

最新发布

m0_69301850的博客

04-29

962

这里是需要截断的长文本，超过三行时会显示省略号...（测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字）-- 关键：min-width: 0 修复截断 -->/* 行高（确保 3 行 = 1.5 × 3 = 4.5em） *//* 最大高度 = 行高 × 行数（可选） *//* 超出部分显示省略号 */-webkit-line-clamp: 3;/* 限制为 3 行 *//* 隐藏溢出内容 */-webkit-box-orient: vertical;/* 垂直排列 */

文本超出显示省略号...，设置超出两行省略号换行不生效的问题

qq_38686150的博客

09-18

1371

参考文章在小程序中当我们需要设置横向滚动内部元素对文字进行省略换行这个需求时无效 BUG 分析: scrcoll-view 要想实现横向滚动有坑需要假下列代码导致我们换行失效的一句代码 white-space: nowrap; 具体参考scoll-view 横向滚动实现如何填坑文子显示省略号 换行代码一行 white-space:nowrap;/*规定段落中的文本不进行换行*/ overflow:hidden;/*内容会被修剪，并且其余内容是不可见的。*

css内容超过宽度显示省略号没效果，文字超过两行折叠省略

前端小王子

08-17

2494

实现代码 overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行没效果解决方案：放置文字的元素使用块级元素例如p，div，不要使用span等行内元素。 ...

css实现文本超过指定行数显示省略不生效的问题

关中刀客在青岛

10-22

1369

css实现文本超过指定行数显示省略不生效的问题要用css实现文本超过指定行数显示三个点的效果，正常样式写法如下： /*超过2行隐藏，并以三个点结尾*/ .limit2line { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } 但react项目中使用时遇到问题了。一共用了两处，一处起作用，一处不起作用，其中不起作用的元素在控制台中把样式前面的勾打掉

H5+CSS3面试题

qq_45604163的博客

03-24

957

html5和css3的一些面试考点

2021-6月面试总结-vue，uniapp，小程序，h5，更新中

shuux666的博客

03-03

917

**一、**vue 2.6.11 vue****页面的生命周期？总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。创建前/后：在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre

两行或三行（多行）文本溢出显示...不生效

Beamon__的博客

09-18

1万+

就在刚刚需要在react项目写一个限制文本长度两行，溢出显示省略号的场景，但是没有生效，经过查阅，得到以下解决方法，供参考～初次写法： .item-title{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; ...

mui使用横向滚动组件后，滚动内容中文字无法多行省略问题

weixin_30649641的博客

09-21

420

感觉这是个大坑，没多大的问题却很头疼，解决办法，换行内容加上white-space: normal;因为mui的滚动mui-scroll有个属性是white-space:nowrap;不让其换行，改变换行，但是加上这个后发现页面错乱了，解决给其滚动内容的父元素ul加上diaplay:flex 转载于:https://www.cnblogs.com/lishuang2243/p/115...

H5+Css3文本溢出添加省略号（包括插件）

qq_34082921的博客

10-07

1860

webkit-line-clamp用来限制在一个块元素显示的文本的行数。限定了在第几行后面增加省略号。使用webkit的css扩展属性（webkit是私有属性）-webkit-line-clamp。因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。将height设置为line-height的整数倍，防止超出的文字露出。：文本需要使用p标签或div标签，span不行。

h5显示两行文字，溢出的隐藏

weixin_60591474的博客

08-09

688

h5显示两行文字，溢出的隐藏

html设置超过两行隐藏

阳光下的木子林的博客

03-07

4350

.item .item-cont h4{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp:2; /* 设置行数 */ -webkit-box-orient: vertical; }

文本溢出隐藏显示省略号失效

weixin_43478592的博客

07-15

1319

之前百试百灵的代码，在这次却不生效了，找了半天都没找到失效原因，唉，惆怅。附上之前的代码： overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后台看到了某博客，瞎猫碰死耗子，试了一下： overflow:hidden; text-overflow:ellipsis; display:-webkit-box; /*

IOS不兼容超出部分省略号 且页面显示不起作用行数限定无作用

weixin_39897287的博客

05-22

7036

解决方法：把 overflow:hidden; overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行（IOS不兼容）换成 overflow:hidden; text-overflow...

elementui table在safari浏览器用了超过两行省略号样式错乱

qq_38299934的博客

02-21

665

elementui table在safari浏览器错乱

html文字超出两行，则显示省略号

热门推荐

CamilleZJ的博客

10-09

1万+

多行超出显示省略号 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; //2行 -webkit-box-orient: vertical; 注意：-webkit-line-clamp是一个不规范的属性（unsupported W...

如何在UniApp中实现H5输入框内容溢出时显示省略号并且保持可编辑性？

11-22

在 UniApp 中，如果你想实现在 H5 输入框内容溢出时显示省略号并保持可编辑性，可以按照以下步骤操作： 1. 首先，在 Vue 组件中创建一个 `<input>` 元素，并设置其样式，比如添加 `overflow` 属性控制文本溢出处理： ```html <template> <div class="input-wrapper"> <input ref="textarea" type="text" v-model="value" :style="{ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }" /> </div> </template> ``` 2. 使用 `ref` 指令获取输入元素的引用，并通过 `v-model` 绑定数据驱动输入框的内容。 3. 当需要判断内容是否溢出时，可以在 `watch` 或者自定义事件处理器里监听输入框的变化，如 `input` 事件： ```js <script> export default { data() { return { value: '', }; }, watch: { value(newVal) { if (newVal.length > MAX_LENGTH) { // 设置一个最长字符数限制 this.value = newVal.slice(0, MAX_LENGTH) + '...'; } }, }, methods: { handleInput(e) { if (e.target.value.length > MAX_LENGTH) { e.target.value = e.target.value.slice(0, MAX_LENGTH) + '...'; // 更新输入框内容 } }, }, created() { this.$refs.textarea.addEventListener('input', this.handleInput); }, beforeDestroy() { this.$refs.textarea.removeEventListener('input', this.handleInput); // 移除事件监听 }, }; </script> ``` 4. 上述代码中，`MAX_LENGTH` 是你可以自定义的最大长度阈值。当用户继续输入超过这个长度的文字时，会自动截断并添加省略号。同时，由于设置了 `whiteSpace: 'nowrap'`，输入框仍然可以编辑。