前端文本溢出问题

最新推荐文章于 2023-04-11 19:11:53 发布
最新推荐文章于 2023-04-11 19:11:53 发布
阅读量525 收藏
点赞数
分类专栏： 前端之路 文章标签： 前端 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50877746/article/details/122286341
版权

引言

在开发微信小程序的时候，有时没有注意到文本超出的情况，导致测试的时候后端传来了一段非常长的文本，导致整个文本溢出，文本遮挡了下面的内容

解决方法

这里主要修改css就行，可以将给文本设一个宽度（一行最长得多宽），再用overflow属性解决即可。

代码

overflow: hidden;
text-overflow: ellipsis;

如果对大家有帮助的话，不妨点赞支持一下

欧业
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
单行文本与多行文本溢出时显示省略号的CSS设置
06-11
单行文本与多行文本溢出时显示省略号的CSS设置
[前端] 实现单行文本溢出和多行文本溢出省略
网站前端/PHP/Android/其他
10-13 986
项目中经常会用的标题或摘要超出省略的功能，从网找了一些参照，在这里写一下，希望对你有帮助。。。 一、单行文本溢出省略 CSS样式： style> .box { width: 120px; height: 100px; background: green; overflow: hidden; w
css段落文字溢出隐藏问题
weixin_30664615的博客
01-05 678
1.实现单行文本的溢出显示省略号 p{ overflow: hidden;text-overflow:ellipsis;white-space: nowrap;} 2.实现多行溢出显示省略号 p{ display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}因使用了We...
前端如何处理文本溢出
tyxjolin的专栏
04-11 2227
当网页设计者或开发者设置文本容器的大小时，如果文本内容超出了该容器的大小，那么就会发生文本溢出的问题。在这个示例中，当设备的宽度小于 768 像素时，容器的宽度为 100%，当设备的宽度大于等于 768 像素时，容器的宽度为 50%。当容器的大小不合适时，即使文本内容没有超出容器的大小，也可能会发生文本溢出的问题。例如，通过计算文本的宽度和容器的宽度，可以确定文本是否超出容器的大小，并采取相应的措施来解决溢出问题。当字体大小过大时，即使文本内容没有超出容器的大小，也可能会发生文本溢出的问题。
前端文字超出以省略号展示
weixin_42606296的博客
09-21 923
前端文字超出以省略号展示 <!-- 文字一行显示 --> white-space: nowrap; <!-- 超出父容器宽度则省略--> overflow: hidden; <!-- 超出父容器部分以省略号来显示 --> text-overflow: ellipsis;
前端正确处理“文字溢出”的思路
fang_my的博客
04-06 1112
最近在项目中需要做到类似于。
一款纯前端写的类似Excel的在线表格源码.zip
05-03
格式设置：样式，条件格式，文本对齐及旋转，文本截断、溢出、自动换行，多种数据类型，单元格内多样式 单元格：拖拽，下拉填充，多选区，查找和替换，定位，合并单元格，数据验证 行和列操作：隐藏、插入、删除行或...
前端项目-trunk8.zip
09-02
前端项目-trunk8,Trunk8是jQuery的智能文本截断插件。当应用到一个大的文本块时，Trunk8将切断足够的文本以防止溢出。与仅限制文本字符长度的传统截断不同，Trunk8测量溢出的内容区域，并智能地选择最适合给定空间的...
jQuery文字溢出显示省略号插件特效代码
03-20
jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号
web前端总结之文本超出显示省略号
攻城喵小猫的博客
12-02 3631
web前端总结之文本超出显示省略号 当网页中显示文字过多时，会出现如下样式的文字 文字显示为省略号，当鼠标移上去时显示文字。 这就是文本超出显示省略号。 主要用到了： text-overflow:ellipsis; overflow:hidden; white-space: nowrap; 在标签中添加title=“被省略的文字”，实现鼠标移动到省略号上显示被省略的文字。 效果：...
前端，文本内容太长，一行显示不下，用省略号...代替
Girasol_YRR的博客
10-12 4740
前端，文本内容太长，一行显示不下，用省略号...代替一、用到的三个属性二、三个属性详解1. white-space 属性2. text-overflow 属性3. overflow 属性 一、用到的三个属性 white-space: nowrap; text-overflow: ellipsis; overflow: hidden; 三个属性配合使用： 空白符不换行 nowrap，在同一行继续显示； 文本溢出包含元素时，显示省略号 ellipsis 来代表被修剪的文本； 将溢出的文本内容隐藏 hidden
前端的文本溢出隐藏解决方案
xjjjj1的博客
08-05 4082
一、css方法 1.当希望文本只保留一行时 white-space:nowrap;/*强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。*/ overflow: hidden;/*超出部分隐藏*/ text-overflow: ellipsis;/*隐藏部分以省略号代替*/2.当文本需要保留多行时 a.webkit内核浏览器(谷歌,Safarim,QQ浏览器)情况下 ...
大前端HTML基础学习--文本溢出
qq_45275992的博客
12-07 271
1、页面重构 2、文本溢出相关的属性
【前端知识之CSS】文本溢出
weixin_44337386的博客
05-17 360
本系列主要整理前端面试中需要掌握的知识点。本节介绍单行和多行文本溢出的处理方式。
前端页面使用CSS方法处理字符串过长的问题最简便
dangkei 的专栏
06-07 4405
做一个项目或者应用的时候我们经常会遇到这样的需求， 表格或者某容器内的字符串过长，撑大了表格，让布局变形。 于是我们需要对字符串处理。 截取固定的长度，多余的长度显示为‘...’ ，  于是我们可能会想很多办法，截取字符串，拼接成固定长度， 也可能在后端处理好传到页面，也可能在前端通过Javascript 通过精妙的方法取dom 计算长度处理。  现在有一个更简单的方法在字符串的父容器添加样式。 
html文本框超出范围,ppt出现文本框中输入文字超出文本框范围的详细操作
weixin_39623350的博客
06-04 473
今天小编讲解了在ppt出现文本框中输入文字超出文本框范围步骤，下文就是关于ppt出现文本框中输入文字超出文本框范围的教程，一起来学习吧。ppt出现文本框中输入文字超出文本框范围的详细操作首先，打开我们的ppt软件，然后开启并进入到ppt中文本框文字内容会超出文本框范围的文档之中。进入后，我们可以在文本框中输入文字内容，看看随着文字的不断输入，文字内容是否会超出文本框范围。若输入文字内容后看到文字已...
前端文字溢出不换行溢出部分省略号
最新发布
04-12
可以使用CSS的text-overflow属性来实现文字溢出部分省略号。例如，使用以下样式： ``` overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ``` 这将使文本溢出时被隐藏，不换行，而且溢出的部分被省略号代替。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值