设置单行文本溢出省略导致不能自适应宽度，white-space: nowrap

最新推荐文章于 2024-05-21 21:13:29 发布
最新推荐文章于 2024-05-21 21:13:29 发布
阅读量1.1k 收藏 5
点赞数 4
分类专栏： css 文章标签： css web 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CNyuCHengrui/article/details/123341771
版权

30秒讲完

通常需要设置文本溢出的地方使用这三句css
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
并且设置一个宽度以后可以获得超过宽度的文本进行…省略
在这里插入图片描述
但是有时候会出现页面宽度变窄以后不能够使得元素自适应缩小
在这里插入图片描述
页面结构打乱

替代

可以将white-space: nowrap;text-overflow;删除
使用-webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical;替代
可以实现根据父元素宽度自适应缩放
而且-webkit-line-clamp: 1;可以根据值变化选择几行内容多余省略

讲完结束

抢走可爱的于老头
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css white-space:nowrap属性用法（可以强制文字不换行输出）
10-26
css强制文字不换行，可给指定的容器增加white-space:nowrap即，下面把CSS示例写给大家,很简单
css white-space属性详解
热门推荐
wangongchao的博客
02-27 1万+
css white-space属性详解
关于CSS中单行文本溢出的解决方案
lonphy23t的专栏
08-12 619
以下是操作的HTML结构： 很长很长的一句话，很长很长的一句话，很长很长的一句话，很长很长的一句话，很长很长的一句话，很长很长的一句话， 1.普通处理方式： .nowrap{ width:200px; overflow: hidden; text-overflow:ellipsis; white-space:now
设置white-space: nowrap文字为一行显示，导致父盒子被撑大的问题及解决方案
qq_43710066的博客
06-29 1516
开发移动端项目的时候碰到文字太长的情况，想进行不换行处理，超出显示省略号这里为了使一行显示3个按钮，开发时采用了vant组件库中的van-grid设置后实现的效果虽然文字超出显示省略号了，但是由于部分文字内容过长，导致父盒子被撑大显示，影响整体的布局效果。
CSS3属性之text-overflow:ellipsis详解
m0_49515138的博客
01-13 4494
webkit-line-clamp 用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。2-2.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式。必须结合的属性 ，将对象作为弹性伸缩盒子模型显示。插件网站:http://dotdotdot.frebsite.nl/:当前对象内文本溢出时不显示省略标记(…
2021-05-28 【CSS/CSS3】样式清除 、清除浮动、溢出文本以省略号显示、强制换行
莉莉的博客
05-28 463
/* ul 样式清除 */ .list-unstyled { padding-left: 0; list-style: none; } /* clearfix 清除浮动*/ .clearfix::after { display: block; clear: both; content: ""; } .clearfix:after { content: ""; display: block; height: 0; clear: bo
使用white-space: nowrap；时导致布局改变
weixin_38345306的博客
08-30 811
当使用white-space: nowrap;导致布局变大时， 只需要在其父元素上设置样式“min-width:0;” 若是大屏项目，分为左中右，需在左(或中或右)的根元素上设置“min-width:0;”即可
white-space: nowrap；导致宽度溢出
mengmengdemeng的博客
01-06 1326
我希望的效果 实际效果 <li class="title clearfix"> <i class="iconfont icon-right fl"></i> <a class="a ellipsis fl" href="/jinritoutiao/20220106/252039.html" title="郑州三公中医院怎么样？服务很贴心 认真负责">郑州三公中医院怎么样？服务很贴心 认真负责</a> <span class="
CSS中的text-overflow属性详解 （控制文字在一行显示，超出部分加省略号）
zzzley的博客
02-23 8885
在上面的代码中，我们将文本内容放在一个200像素宽的容器中，并设置text-overflow为ellipsis（表示使用省略号来处理文本内容的溢出），white-space为nowrap（表示不允许文本进行换行），overflow为hidden（表示当文本内容超出容器宽度时，隐藏超出部分）。其中，white-space属性用于控制文本如何进行换行，而overflow属性用于控制当文本内容超出容器限定宽度时的显示方式。这时候，就需要使用text-overflow属性来处理文本内容的溢出问题。
white-space:nowrap的应用
09-27
在web2.0的概念中，标签是个时常出现的东东，可是在设计时中文不象英文那样在表现标签云时表现的那么好，主要是中文词组的成为标签后，有时会出现长标签在标签云中被断行的问题。今天发现有人在问这个问题，以前遇到...
使用text-overflow:ellipsis实现溢出文本省略号显示无需js
12-13
今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求 原本使用js截取字符串然后判断字符串长度实现，不过相对比较繁琐，并且字符串长度不能自适应 听说用css的 text-overflow: ellipsis 也可以实现，...
css文本换行属性word-wrap和white-space使用总结
09-25
td文字内容不换行，发现是：white-space: nowrap，即强制文本不进行换行，接下来对文本换行的属性使用进行总结下，感兴趣的朋友可以参考下哈
IE6下li无法自适应宽度解决办法
kevinkristoffer的专栏
04-12 545
xxxxxxx xxxxxx xxxxx xxxxx xxxxxxxx
text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
06-04 479
数据可视化大屏在实际开发中，必须考虑到大屏的自适应。文本的自适应性是不可避免的功能开发。在此过程中，CSS的text-overflow是不可或缺的手段。
CSS文本溢出设置
qq_45635596的博客
11-22 1352
CSS文本溢出设置 一、text-overflow文本溢出显示省略号 1.text-overflow:clip; 不显示省略号（…),而是简单的裁切 2.text-overflow:ellipsis;单行文本溢出时显示省略号 二、White-space设置空白空间的效果 1.white-space:normal;默认值 2.white-space：nowrap;文本不会换行，文本会在同一行上继续，直到遇到br标签为止 3.white-space:pre;空白符会被保留，浏览器可以识别空格 4.white-s
CSS文字超出宽度---换行总结---附代码
tangdou369098655的博客
05-05 3385
2021-5-5重新总结----附代码 <!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> ....
2021.11.18 每天进步一点点：由left:50%引发的盒子宽度问题及解决
tuzi007a的博客
11-18 933
这里写目录标题发现问题分析问题分析思路锁定问题说说包含块：关于包含块的那些事儿包含块的四种情况包含块对绝对定位的子盒子做了什么解决问题设置固定宽度内容为文字时设置为不换行用魔法打败魔法的方法参考文档 发现问题 有这么个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed
flex white-space: nowrap,撑大盒子问题
笔记
04-06 4022
flex布局，两行，一个是标题，一个是属性。想实现的功能，标题超长“......”省略号代替。 出现一个问题就是，内容过长，会撑大盒子宽度。虽然不显示，但是会影响下面一行属性的显示。通过给父盒子添加min-width：0；解决。 .item-content { display: flex; flex-direction: column; justify-content: spac...
CSS中的writing-mode属性：解锁文本布局新维度
最新发布
艾恩小灰灰的博客
05-21 353
属性定义了文本在块级元素中的书写方向，它决定了文本是水平还是垂直排列，以及是从左到右、从右到左，还是从上到下显示。这对于支持多种语言的排版（如东亚语言的竖排文本）和创造非传统布局至关重要。属性虽小，却蕴藏着改变文本布局的巨大能量。无论是为了文化尊重、设计创新还是提升用户体验，掌握并灵活运用这一属性，都能让你的设计作品更加丰富多彩。随着Web技术的不断进步，我们有理由相信，未来将在更多领域展现出其独特的魅力。希望本文能够激发你对CSS这一鲜为人知特性的探索兴趣，开启你的创意之旅。
white-space: nowrap; text-overflow: ellipsis;不生效
09-06
你可以尝试将这些属性应用于一个具有固定宽度的容器，以确保它们生效。这样，当内容超出容器宽度时，它们才会起作用。另外，请确保容器的overflow属性设置为"hidden"，以便在内容溢出时进行裁剪。以下是一个示例: ```HTML <style> .container { width: 200px; /* 设置容器宽度 */ white-space: nowrap; /* 防止文本换行 */ overflow: hidden; /* 溢出内容进行裁剪 */ text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */ } </style> <div class="container"> 这里是一段很长的文本内容，超过容器宽度时会被省略显示。 </div> ``` 请注意，这些样式属性只适用于文本内容，对于其他元素（如图片）可能不起作用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值