css不换行属性_CSS强制不换行的whitespace:nowrap的坑，你会填么？

最新推荐文章于 2024-12-23 09:10:45 发布
最新推荐文章于 2024-12-23 09:10:45 发布 · 523 阅读 · 0
标签
#css不换行属性 #css强制换行
本文介绍了一种在使用CSS布局时遇到的问题，即如何解决white-space: nowrap导致的子元素强制在同一行显示的问题。通过使用white-space: pre-wrap属性值成功解决了该问题。

最近在忙着公司的小程序商城重构的项目

遇到怎么一个坑问题，多个商品左右横滑的排列展示的方式。

95c94b5eaaa0b85db857d7c37487b00e.png

最终完成的效果我最一开始的想到的布局结构就如下图

df5d0e2b8494ab9774ef553c59b146e7.png

设计稿有了，想法也有了就马上动手写！！

d27fa04ab95579910bd3397c779cb43c.png

带着满怀信心的想法就一顿的敲键盘结果最后出来的效果就是如下图

0072b56fd1ac7ccd429535bd4073cc4b.png

我想聪明的小伙伴们已经

看出问题的出在哪里了！

不错这正式white-space:nowrap的坑也是css的本身具有的坑，css规则里规定了子层会继承父层样式属性，也就是这一个规定导致，我最后写出来的效果就是自有white-space:nowrap，这一样式的这一层开始，他的所有的子层都会继承了white-space:nowrap的特征，全部都被强制的在一行显示。

最后我也是懵逼了好一阵子想了各种办法，百度了好一会儿还是无法填上这个坑。最后实在没办法了就去研究了white-space的所有的属性值。

92e11a1be1685929bd55ed722bf71719.png

看到属性值的描述解释，让我看到了pre-wrap这个属性值，我就抱着试试的心态，在第二层的view加上white-space:pre-wrap;样式，我去！！！既然起到了效果，成功的把子层的强制一行显示的特征改变了完成了填坑。

8feea4c5419baec946816488ebeb312a.gif

b227f5e1c2d7c0734735dc0b859cff7e.png

你get到了么？?

white-space:nowrap详解white-space的用法
galaxyJING的博客
01-25 3347
特别是标题列表，我们想一行只显示一条标题内容，而有时宽度有限标题文字多了width(宽度)又有限，这样会造成文字自动换行，这个时候我们可以使用white-space样式让他一排显示不换行，为了隐藏超出的文字内容可以再加一个css overflow:hidden样式，就会出现这样一个效果。通常我们使用于强制一行显示内容 通常我们使用white-space:nowrap强制文本文字内容不换行，在对象内一行显示完所有文字内容。white-space语法： white-space : normal nowrap。
white-space: nowrap 这个样式的作用
Keep trying, keep going
04-29 3324
是CSS中的一个属性值，它的作用是阻止元素中的文本换行，即使在HTML源代码中存在换行或空格也会被浏览器忽略。所有的文本都将在一行中显示，直到遇到。参考官网：https://developer.mozilla.org/zh-CN/docs/Web/CSS/white-space。如果文本长度超过了元素的宽度，也不会自动换行，而是会超出元素的边界继续显示。时，浏览器会自动换行，合并连续的空格和换行符（例如多个空格会被视为一个空格）。即 相比normal，只是多了不换行。
设置white-space: nowrap文字为一行显示，导致父盒子被撑大的问题及解决方案
qq_43710066的博客
06-29 2984
开发移动端项目的时候碰到文字太长的情况，想进行不换行处理，超出显示省略号这里为了使一行显示3个按钮，开发时采用了vant组件库中的van-grid设置后实现的效果虽然文字超出显示省略号了，但是由于部分文字内容过长，导致父盒子被撑大显示，影响整体的布局效果。
white-space: nowrap 导致有宽度也不换行的问题
Tizzy_Joel的专栏
05-23 2516
如果一些元素的样式中有"white-space: nowrap;",并且这些元素之间没有空格，             则即使包含这些元素的父类定义了宽度，这些元素也不换行。             如果要换行，则在这些元素间加空格。
CSS 元素设置display: inline-block；出现不对齐情况解决方法
EastRiseJi的博客
10-13 2474
事情是这样的： 为了使页面看起来比较整齐，我限制了书名的长度并添加title显示。发现我将中间书名设置成"display:inline-block;"后，书名位置偏上显示了（如下图）。 <style> .box { } .book-name-box { display: inline-block; min-width: 200px; text-align: right; } .mid { ...
CSS white-space normal nowrap强制同一行内显示所有文本不换行
qq_44884549的博客
04-09 516
CSS white-space normal nowrap强制同一行内显示所有文本不换行
white-space: nowrap;强制标签不换行
tianlin0的专栏
06-30 1083
white-space: nowrap;强制标签不换行 2008年04月26日 12:55 语法：white-space : normal | pre | nowrap 取值：normal : 默认值。默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行 pre : 换行和其他空白字符都将受到保护。这个值需要IE6+或者 !DOCTYPE 声明为 standards-compliant
css防止ul下的li换行(li超出宽度变成…)代码
chiwanqi9869的博客
01-09 433
在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里 分别有4个li 这个4个li的宽度根据它们的自身内容长度为80px、120px、140px、80px。 我需...
CSS | white-space: nowrap 和 flex-wrap: nowrap 的联系与区别
weixin_51076986的博客
07-28 1621
和都用于控制内容不换行，但它们分别应用于文本和 flexbox 布局。理解它们的区别和联系有助于在不同的布局需求中选择合适的属性。——本内容由 ChatGPT 生成，著作权归其所有。作者将其作为学习笔记记录。
white-space属性的normal值和nowrap值
sslovly的博客
09-11 5150
normal：文本自动处理换行，到达容器边界的内容会自动转到下一行。 nowrap：在同一行内显示所有文本，直到文本结束或者文本后面有 标签。 white-space:normal 的属性其实我感觉用处不大啊... 我试了在div和li标签里,有没有normal都会去自动换行的. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta h
CSS样式中white-space: nowrap的用法及相关属性
zhouzhou20002000的博客
07-30 8861
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
＜a＞标签使用white-space: nowrap不换行而是全在一行显示
lwy23czl的博客
09-29 1184
a标签换行
css的white-space属性：normal，nowrap，pre，pre-line和pre-wrap的区别？
木木木华的博客
09-23 1万+
css的white-space属性：normal，nowrap，pre，pre-line和pre-wrap的区别？ 禁止换行
white-space: nowrap; text-overflow: ellipsis;
wdgkw的专栏
09-21 4561
display: inline-block;//块级元素显示在这一行，不换行，其他块级元素也可以显示在这一行 white-space: nowrap; 所有的文本都显示在这一行 text-overflow: ellipsis; 多余的文本用省略号显示 white-space: nowrap; text-overflow: ellipsis;
white-space:nowrap实现不断行（非常实用的东东）
wjlvivid的专栏
09-20 459
white-space 属性设置如何处理元素内的空白 这个属性声明建立布局过程中如何处理元素中的空白符 默认值： normal     JavaScript 语法： object.style.whiteSpace="pre"例规定段落中的文本不进行换行：p  {  white-space: nowrap  } 值： normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为...
white-space属性的normal值和nowrap值的区别
qq_44329870的博客
11-06 7480
white-space属性 normal：默认对文本的处理方式，文本自动处理换行，到达容器边界的内容会自动转到下一行。 nowrap：强制在同一行内显示所有文本，直到文本结束或者文本后面有标签。 举例代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .w
css中white-space 属性：“pre”, “pre-line”, “pre-wrap” “nowrap”的区别
热门推荐
赶路人儿
07-22 4万+
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示，取值有： normal：默认，忽略文本中所有的空白、换行符；只有文本存在 <br> 或文本达到框的约束时，文本才会换行 nowrap：和normal类似，忽略文本中所有的空白、换行符；遇到框的宽度约束时不会自动换行，文本只有在有 br 时才会换行 pre：保留文本中的空白、换行符；遇到框的宽度约束时不会自动换行，文本存在 <br> 或文本中有换行符时，文本才会换行 pre-wrap：和
white-space使用技巧-国际化使用
最新发布
JackieDYH的博客
12-23 900
（空白字符）指的是那些不可见的字符，它们用于分隔代码中的元素，使代码更易读。元素内的文本不会换行，会一直在同一行显示。在代码编辑和格式化中，
white-space: nowrap用法
大胖东的博客
08-25 1010
“white-space: nowrap;”此代码是什么意思？
amy0821的博客
08-01 5326
定义和用法 white-space 属性设置如何处理元素内的空白。 这个属性声明建立布局过程中如何处理元素中的空白符。 值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。 默认值： normal 继承性： yes 版本： CSS1JavaScript  语法： object.style.whiteSpace="pre" 实例规定段落中的文本不进行换行： p
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值