blocks|key|1000212|text|line-height属性用于设置线之间的距离。如果你设置的值大于font-size，那么看起来线条就会越来越远。将其设置得更小，线条将开始重叠。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1000213|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The line-height property sets the distance between lines. If you make the value larger than the font-size then it will look like the lines are moving further away. Set it smaller, and the lines will start to overlap.

blocks|key|62861|text|Line-height指定行之间的间隔量。因此，为了得到“双倍行距”类型，你应该有:+200%25的行高。Read+More...|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|62862|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/css/pr_dim_line-height.asp^0|1F|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Line-height specifies the amount of space between lines. So to get "double spaced" type, you'd have line-height: 200%. <a href="http://www.w3schools.com/css/pr_dim_line-height.asp" rel="nofollow noreferrer">Read More...</a>

blocks|key|63591|text|行高：http://www.w3schools.com/css/pr_dim_line-height.asp|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|63592|空白：http://www.w3schools.com/css/pr_text_white-space.asp|63593|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/css/pr_dim_line-height.asp|1|http://www.w3schools.com/css/pr_text_white-space.asp^0|3|1F|0|0|3|1G|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

line-height:
<a href="http://www.w3schools.com/css/pr_dim_line-height.asp" rel="nofollow noreferrer">http://www.w3schools.com/css/pr_dim_line-height.asp</a>

white-space:
<a href="http://www.w3schools.com/css/pr_text_white-space.asp" rel="nofollow noreferrer">http://www.w3schools.com/css/pr_text_white-space.asp</a>

blocks|key|1000407|text|它主要用于段落中行之间的距离。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1000408|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

It's used mostly for distance between lines in a paragraph.

blocks|key|1000441|text|line-height属性允许您独立于字体大小设置文本行的高度(适用于将单行文本垂直居中，等等)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1000442|空格:nowrap；将使文本行在遇到a之前不换行。|1000443|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

The line-height property allows you to set the height of a line of text independently from the font size (works well for centering a single line of text vertically, etc.)

white-space:nowrap; will for lines of text not to wrap until a &lt;br /&gt; is encountered.

blocks|key|63652|text|Line-height属性设置直线之间的距离。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|63653|white-space属性设置如何处理元素中的空格。|63654|nowrap:文本永远不会换行，它在同一行上继续，直到遇到标签|63655|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/css/pr_dim_line-height.asp|1|http://www.w3schools.com/css/pr_text_white-space.asp^0|0|B|0|0|0|B|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

The <a href="http://www.w3schools.com/css/pr_dim_line-height.asp" rel="nofollow noreferrer">Line-height</a> property sets the distance between lines.

The <a href="http://www.w3schools.com/css/pr_text_white-space.asp" rel="nofollow noreferrer">white-space</a> property sets how white-space inside an element is handled. 

nowrap: The text will never wrap, it continues on the same line until a &lt;br&gt; tag is encountered

blocks|key|1363443|text|可以与line-height属性一起使用的另一个技巧是在元素内垂直对齐文本。下面是一个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1363444|<div+class="container">
+++<h1>Vertically+align+this!</h1>
</div>

.container+{
+++height:+5em;
+++background-color:+red;
+++line-height:+5em;
}

+++.container+h1+{
++++++font-size:+3em;
+++}|code-block|syntax|javascript|1363445|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another trick that can be used with the line-height property is to vertically align text inside an element. Take the following example:

<pre><code>&lt;div class="container"&gt;
 &lt;h1&gt;Vertically align this!&lt;/h1&gt;
&lt;/div&gt;

.container {
 height: 5em;
 background-color: red;
 line-height: 5em;
}

 .container h1 {
 font-size: 3em;
 }
</code></pre>

blocks|key|1000587|text|line-height会将两条直线之间的距离设置为绝对值或相对值。因此，line-height:+2em;将是双倍行距，等等。而font-size设置字体的实际大小。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1000588|white-space告诉浏览器如何处理空格。"nowrap“将告诉浏览器不要对文本换行，而是让文本在行中继续，直到遇到换行符( )。您还可以使用"pre“保留空白(与使用<pre>标记相同)，或者使用"normal”告诉浏览器忽略空白(这是默认设置)。|1000589|entityMap^0|0|B|10|H|1S|9|0|0|B|1S|5|2I|5|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$]]

<code>line-height</code> will set the distance between two lines, either as an absolute or relative value. So <code>line-height: 2em;</code> would be double line spacing, etc. Whereas <code>font-size</code> sets the actual size of the font.

<code>white-space</code> tells the browser how to handle whitespace. "nowrap" will tell the browser to never wrap text, and instead to make the text continue on the line until a line break tag (<code>&lt;br/&gt;</code>) is encountered. You can also use "pre" to preserve the whitespace (same as using the <code>&lt;pre&gt;</code> HTML tag), or you can use "normal" to tell the browser to ignore whitespace (this is the default).

blocks|key|1000615|text|行高是文本的高度。字体有一个内置的、默认的行高。对于单行文本，它将与调整填充相同。但是对于多行文本，它控制文本行之间的间距--没有其他方法可以控制。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1000616|空格:+nowrap告诉浏览器在水平方向空间耗尽时不要开始换行。取而代之的是，尽可能地推动元素的宽度，然后简单地溢出长方体的尺寸。您可以通过将所有空格替换为实体来实现相同的功能。|1000617|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

Line height is the height of the text. Fonts have a built-in, default line height. For single lines up text it will be the same as adjusting padding. But for multilines of text it controls the space between the lines of text-- which there is no other way to control. 

White-space: nowrap tells the browser not to start a new line when it runs out of space horizontally. Instead, push the element as wide as it will go, and then simply overflow the dimensions of the box. You can achieve the same thing by replacing all spaces with &amp;nbsp; entities.

blocks|key|1365430|text|“space-space:nowrap；”的主要用途是在表格标题单元格中(在表格顶部或左边)，根据表格内容的不同，您不希望在表格标题单元格中换行。如果没有它，结果将很容易变得丑陋。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1365431|请参阅How+to+prevent+text+in+a+table+cell+from+wrapping|offset|length|1365432|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/300220/how-to-prevent-text-in-a-table-cell-from-wrapping^0|0|3|1D|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

The main use of "white-space:nowrap;" is inside a table header cell (on the top of the table, or on the left) where you don't want that, depending on the table content, you would get line breaks. Without it, the result would be easily ugly.

See <a href="https://stackoverflow.com/questions/300220/how-to-prevent-text-in-a-table-cell-from-wrapping">How to prevent text in a table cell from wrapping</a>

what's <code>line-height</code> supposed to do since there is already an attribute called <code>font-size</code>?

And what does it mean when we specify something like:

<pre><code>white-space:nowrap;
</code></pre>

What is the purpose of line-height, and what does white-space:nowrap do?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

既然已经有一个名为font-size的属性，那么line-height应该做什么当我们指定如下内容时，这意味着什么：white-space:nowrap;

问行高的目的是什么，空格:nowrap What做了什么？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问行高的目的是什么，空格:nowrap What做了什么？EN