38

是否可以创建将生成以下 HTML 的规则：

<div style="width: 100%"></div>

仅使用 CSS 的一行高度，还是我需要将&nbsp;其作为内容？

4

6 回答 6

40

一些可能性：

  • 设置height（或min-height）为line-height的使用值。

    line-heightis的初始值normal，其使用的值取决于实现，但规范建议一个介于1.0和之间的数字1.2

    在我的情况下（FF27 for winXP with font-family: "times new roman"）该值是1.25，所以你可以使用height: 1.25em. 但是，该值可能与其他字体或实现不同。

    然后，最好手动设置line-height为某个值，例如line-height: 1.25em.

    div {
  border: 1px solid red;
  min-height: 1.25em;
  line-height: 1.25;
}
    <div></div>

    请注意，如果您只想在元素没有内容时将这些样式设置为元素，则可以使用:empty伪类： 

    div:empty {
  border: 1px solid red;
  height: 1.25em;
  line-height: 1.25;
}
    <div></div>

  • 向元素中插入一些内容。

    例如，您可以添加一个普通空间并设置white-space为pre-wrap(或pre) 以防止空间折叠：

    div {
  border: 1px solid red;
  white-space: pre-wrap;
}
    <div> </div>

    或者，您可以使用零宽度空格( &#8203;)

    div { border: 1px solid red; }
    <div>​&lt;/div><!-- There is a zero-width space inside -->

    正如你所说，&nbsp;也可以。但是，它是一个不间断的空格，所以它的目的是防止自动换行。然后，使用它在 IMO 语义上是不正确的。

    正如@BoltClock所说，这些空格可以使用 CSS 伪元素插入，但请注意，这可能不适用于非常旧的浏览器。

于 2013-10-13T17:24:26.597 回答
18

这取决于您对单行高度的定义，因为没有与计算出的元素行高相对应的 CSS 单元。

如果您知道line-height此元素的确切值，则可以显式设置height为相同的值。但是，鉴于您的问题，情况可能并非如此。

有一个与字体大小相对应的单位，em如果一行的高度等于计算出的字体大小，则可以使用该单位：

<div style="width: 100%; height: 1em"></div>

否则，您将不得不添加某种填充内容。您可以输入一个&nbsp;并完成它：

<div style="width: 100%">&nbsp;</div>

或者通过使用伪元素编写 CSS 规则来有点矫枉过正，但你必须能够以某种方式定位这个元素：

div::before { content: '\00a0'; }

如果元素可能有内容，也可能没有内容，但您希望它具有最小高度，

  • 使用min-height你本来会使用的地方height，或者

  • 如果您选择div:empty::before使用伪元素，请改为选择，这样如果有内容，则不会插入填充符。

于 2013-10-13T17:23:13.187 回答
18

只是另一种解决方案：

.your-selector:empty::after {
    content: ".";
    visibility: hidden;
}
于 2015-10-23T09:26:04.883 回答
12

解决方案visibility: hidden;很聪明。将内容设置为Unicode字符更简单feff，这是字节顺序标记。这没有宽度但有高度；一直到 IE6，它在每个浏览器上的行为都是相同的。

.your-selector:empty::before {
    content: '\feff';
}

我发现 WebKit（至少在 Mac OS 上）对粗体文本应用的行高与某些字体的普通文本略有不同（1px）。为了强制统一（在这种情况下，我们甚至需要应用到非空选择器）：

.your-selector::before {
    content: '\feff';
    font-weight: 900;
}
于 2017-03-29T19:27:08.780 回答
0

我遇到的问题是 jQuery 终端需要有与普通行相同大小的空行。其他解决方案是有问题的，因为当使用固定的行高时，行之间存在间隙，Firefox中也存在我报告的关于字体大小 + 行高的布局的错误。

到目前为止，最好的解决方案是：

div::before {
    content: '\0200B';
    float: left;
    display: block;
}

并且代码中没有行高/最小高度，它工作得很好。此外，当不使用 line-height 时，它具有好看的样式选择而没有间隙。

于 2020-07-23T14:09:46.490 回答
-3

你想保持多高？这与您的字体大小有关吗？可以是 em、pt、px 或 %。

这只是 1.5em 是任意值的示例：

<div style="width: 100%; height: 5px" ></div>

如果您在此 div 中没有任何内容可写，请使用一些高度值。

于 2013-10-13T17:16:46.183 回答