[css] 举例说说你对white-space属性的理解

最新推荐文章于 2023-11-13 21:31:36 发布
最新推荐文章于 2023-11-13 21:31:36 发布
阅读量206 收藏
点赞数
分类专栏： # 前端面试题css目录汇总
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43392489/article/details/112725642
版权

[css] 举例说说你对white-space属性的理解

值 	说明
normal 	默认。空白会被浏览器忽略。
pre 	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 	保留空白符序列，但是正常地进行换行。
pre-line 	合并空白符序列，但是保留换行符。
inherit 	规定应该从父元素继承 white-space 属性的值。

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题

前端小歌谣
关注
专栏目录
white-space属性的normal值和nowrap值的区别
qq_44329870的博客
11-06 7224
white-space属性 normal：默认对文本的处理方式，文本自动处理换行，到达容器边界的内容会自动转到下一行。 nowrap：强制在同一行内显示所有文本，直到文本结束或者文本后面有标签。 举例代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .w
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
weixin_33185844的博客
08-04 1273
CSS高级技巧目录1、精灵图使用原因：一个网页往往会有很多小的背景图片作为装饰，为了有效减少接收和发送请求的次数，提供页面加载速度，所以出现了精灵技术。核心原理就是将小图片整合到一张图里，这样浏览器只需要发送一次请求到服务器就可以了。属性：background-position使用原理：先量好背景图片的宽和高，然后创建一个盒子，大小和背景图片一样，插入整张精灵图到盒子中，图片默认都是在盒子的左上角...
li标签到的浮动换行
luanshaofeng的程序人生
04-29 1519
比较新的游览器都不会出这样的问题,老版的IE会在换行的时候文字在LI里边换行,所要需要white-space这个属性值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。pre-wrap保留空
white-space详解
weixin_30629653的博客
01-23 639
white-space [normal | pre | pre-wrap | pre-line | nowrap] css中的white-space属性用来设置文本中空白字符的处理方式，其中空白字符包括空格，tab, 换行符等，可取值有： normal：合并空白字符（多个空格或tab会被合并为一个空格），忽略换行符，允许根据容器宽度自动换行（下面简称自动换行） nowrap：合并空白字符，...
css属性white-space怎么理解
weixin_44712870的博客
07-14 843
white-space直白地翻译就是空白，它可以设置你对标签内空白部分的处理方式。 如果不想显示空格，可以设置属性值为normal或者nowrap，区别在于normal会将文本包裹在指定的宽度内，会导致换行；而nowrap则不会包裹，不会有换行。 如果想显示空格，可以设置属性值为pre或pre-wrap，区别在于pre没有包裹的效果，即不会自动换行，只有你的文本中有换行符才会换行；而pre-wrap则可以实现包裹，即自动换行。 参考（网页中有效果展示）： https://developer.mozilla.
html中li能做浮动吗,css浮动规则
weixin_29117669的博客
06-20 1711
css浮动在说明浮动规则之前，先讲一下为什么需要浮动吧。HTML中的标签可分为块状元素和行内元素。块状元素在页面显示中独占一行，可以定义宽高，就像这样：但行内元素可以并排显示，那么如果想要实现块状元素像内联元素一样可以并排显示的话，就需要给元素设置浮动属性。浮动可以取消标准流模式，让块状元素可以并排显示。浮动在css中的写法：选择器{float：属性值；}浮动的属性值left：向左浮动；right...
简单但很实用的5个css属性
01-19
我提到的都是被所有浏览器支持的css2属性比如：clip、min-height、white-space、cursor和display。千万别错过这篇文章，因为你会惊讶的发现他们是很有用的。一、css clip（裁切）clip裁切这个属性有点像是遮罩。它...
CSS第九章 移动端布局-Bootstrap
晓葉斑比
06-05 1096
BootstrapBootstrapContainersGrid system栅格系统Grid optionsAuto-layout columnsEqual-widthSetting one column width 设置列宽度 Bootstrap Bootstrap是HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。 好处：不需要自己写样式，它提供了大量的class样式供选择 我下的最新版本v5.0.1，不同版本提供的内容有改变 特色：1. 响应式布局（不需要自己写media q
03-文本小节-用CSS实现文字超出省略.md
最新发布
03-31
white-space: nowrap; /* 不换行 */ overflow: hidden; text-overflow: ellipsis; /* 超出省略 */ } ``` 2. 多行文字超出省略： ```css #box2 { border: 1px solid #ccc; width: 100px; overflow: hidden; ...
li自动换行
锋行天下
07-13 923
<br />.contentT{ clear:both; border-top:1px solid #fff; border-left:1px solid #fff;} .contentT ul{ width: 300px; } .contentT li{ float:left; list-style-type:none; height:14px; width:52px; display:block; border-right:1px solid #fff
li标签自动换行
怎么肥事
01-04 5416
&lt;li&gt;&lt;b&gt;&lt;/b&gt;其他店铺报名要求：&lt;p style="width: 100%; word-break : break-all;white-space:normal;"&gt;$!{datail.shop_remark} #if($!{datail.shop_remark}=='')不限#end&lt;/p&gt;&lt;/li&gt;...
ul 下的li标签都浮动，那么ul的高度用两个css搞定
qq_38093702的博客
08-02 1548
在ul加入zoom:1;overflow:hidden; ul {      zoom:1;      overflow:hidden; }
Ul中li如果有浮动会使ul高度塌陷，清楚li浮动的几种解决方法
weixin_39636374的博客
03-05 3291
1、最直接简单的方法就是给ul加一个高度。（不适合ul不设置高度的情况）ul{...height: 30px;/*添加高度，解决float浮动引起的高度坍陷*/}2、在最后一个li后加上一个div，给div加上clear:both的样式。（样式不规范）&lt;li&gt;&lt;a href="##"&gt;联系我们&lt;/a&gt;&lt;/li&gt;&lt;div style="clear...
css中li文字怎么换行,使用CSS设置li自动换行
weixin_28718487的博客
08-04 1655
#0 /www/web/api_95links_com/public_html/__SEO/Library/Think/Db/Driver.class.php(109): E('SQLSTATE[HY000]...')#1 /www/web/api_95links_com/public_html/__SEO/Library/Think/Db/Driver.class.php(1064): Thin...
解决ie6下li左浮动文字换行的问题
zhu2007012205的专栏
04-19 594
我们经常会用到让li左浮动来自动换行，当父标签剩下宽度不够一个li的宽度时自动转到下一行，在高版本浏览器中是没问题的，但是在ie6中会出现宽度不够时，这一行最后一个li中的文字出现换行，而本身li自己不换行，可能是ie6没有将li看作是一个整体，而是将单个文字看成是一个整体了，尝试过给li添加block等属性，但是都没有作用，最后发现处理这个问题其实很简单，只需要一个属性就可以：ul { wh
li里的a标签浮动了，为什么li本身也浮动了？
weixin_34293902的博客
12-01 589
&lt;ul&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a hr
前端案例-css实现ul中对li进行换行
qq_43720551的博客
11-13 3322
我想要实现，在展示的item个数少于4个的时候，则排成一行，并且均分（比如说有3个，则每个的宽度为33.3%），如果item 个数大于4，则进行换行
CSS处理li中的内容换行问题
lenofurio的博客
02-10 1533
解决li中保留换行符和内容自动换行的问题
white-space属性
03-22
white-space属性是CSS中的一个属性，用于控制元素内部空格和换行的处理方式。它有三个可选值：normal、nowrap和pre。normal表示浏览器会忽略多余的空格和换行，只保留一个空格；nowrap表示浏览器会忽略所有的空格和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小歌谣

放弃很容易 但是坚持一定很酷

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值