搜索
首页web前端html教程HTML里white-space怎么使用

HTML里white-space怎么使用

Nov 22, 2017 pm 03:17 PM
htmlwhite-space使用

white-space是HTML一个标签,那么今天我们给大家科普一下,这个属性究竟怎么使用,可以在哪些情景下使用

white-space norma nowrap强制同一行内显示所有文本文字,让所有文字内容中一排显示不换行。

让文字不自动换行,无论CSS宽度设置多少,所有文字都在一行内显示。特别是标题列表,我们想一行只显示一条标题内容,而有时宽度有限标题文字多了width(宽度)又有限,这样会造成文字自动换行,这个时候我们可以使用white-space样式让他一排显示不换行,当然我们为了隐藏超出的文字内容我们可以再加一个css overflow:hidden样式。

white-space语法:

white-space : normal nowrap 

white-space参数:

normal :  默认处理方式

nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。推荐使用white-space:nowrap强制不换行。

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

通常我们使用white-space:nowrap强制文本文字内容不换行,在对象内一行显示完所有文字内容。

我设置2个对象盒子,一个设置强制同行显示文本内容。第二个设置强制同行显示,但使用html br标签观察效果。为了white-space案例应用效果,我设置css宽度一定120px,css高度为60px,css行高 line-height为20px 。

css代码

<style> 
div{ width:120px; height:60px; line-height:20px} 
.div{ white-space:nowrap} 
</style>

2、html代码片段

<div class="div">内容将在一行内强制显示完整</div> 
<div class="div">内容使用br换行<br /> 
将会不被<br />换行显示</div>

日常我们为了让文字内容在一行内显示完,哪怕宽度不够也不能换行,我们可以使用white-space样式,但如果遇到了html br强制换行标签,无论是设置white-space与否都会被0c6dc11e160d3b678d68754cc175188a强制换行。

介绍了这么久的white-space,相信你一定已经有所了解,有需要的朋友可以保存一下,更多精彩请大家持续关注本站的其他更新。

相关阅读:

html中的label标签使用方法


DIV背景图片background的设置方法


HTML标题标签元素怎么修改

以上是HTML里white-space怎么使用的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
HTML标签和元素是同一件事吗?HTML标签和元素是同一件事吗?Apr 28, 2025 pm 05:44 PM

文章解释说,HTML标签是用于定义元素的语法标记,而元素是完整的单位,包括标签和内容。他们一起工作以构建网页。查拉克计数:159

&lt; head&gt;的意义是什么。 &&lt;身体&gt;在html中标记?&lt; head&gt;的意义是什么。 &&lt;身体&gt;在html中标记?Apr 28, 2025 pm 05:43 PM

本文讨论了Lt; Head&gt; &&lt;身体&gt; HTML中的标签,它们对用户体验的影响以及SEO的影响。正确的结构增强了网站功能和搜索引擎优化。

&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签?&lt; strong&gt;,lt; b&gt;有什么区别标签和lt; em&gt;,&lt; i&gt;标签?Apr 28, 2025 pm 05:42 PM

本文讨论了HTML标签,和和关注其语义与表现用途及其对SEO和可访问性的影响之间的差异。

请说明如何指示HTML中文档使用的字符集?请说明如何指示HTML中文档使用的字符集?Apr 28, 2025 pm 05:41 PM

文章讨论了在HTML中指定字符,重点介绍了UTF-8。主要问题:确保正确显示文本,防止乱七八糟的字符,并增强SEO和可访问性。

HTML中的各种格式标签是什么?HTML中的各种格式标签是什么?Apr 28, 2025 pm 05:39 PM

本文讨论了用于构建和造型Web内容的各种HTML格式标签,强调了它们对文本外观的影响以及语义标签对可访问性和SEO的重要性。

HTML元素的' ID”属性与'类”属性之间有什么区别?HTML元素的' ID”属性与'类”属性之间有什么区别?Apr 28, 2025 pm 05:39 PM

本文讨论了HTML的“ ID”和“类”属性之间的差异,重点是它们的独特性,目的,CSS语法和特异性。它解释了它们的使用如何影响网页样式和功能,并为

HTML中的'类”属性是什么?HTML中的'类”属性是什么?Apr 28, 2025 pm 05:37 PM

本文解释了HTML“类”属性在分组样式和JavaScript操纵元素中的作用,将其与唯一的“ ID”属性进行对比。

HTML中有哪些不同类型的列表?HTML中有哪些不同类型的列表?Apr 28, 2025 pm 05:36 PM

文章讨论了html列表类型:订购(&lt; ol&gt;),无序(&lt; ul&gt;)和描述(&lt; dl&gt;)。专注于创建和样式列表以增强网站设计。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)