1

有点新手，并试图找出一些可能很简单的东西：

我正在尝试“堆叠”一些文本，但在大词中插入了一个小词，如下所示：

这

是一个

重要的

句子

因此，我将 HTML 布局在其自己的类中，并带有正文，字体大小为 8em，中间有一个跨度用于较小的单词。

THIS<br>IS AN<br><span class="important">important</span><br>SENTENCE<br>

在 CSS 中，我为“重要”设置了一个类：

.important {
    font-size: 0.5em;
    line-height: 0.5em;
}

...它就在那里，看起来很棒，但是行高似乎没有占用。“important”这个词的大小是 0.5em，但 line-height 和其他词一样高，导致 IS AN 之后和“important”之前有一个巨大的空间。

我已经尝试过在跨度内外都使用 br，在“重要”的两侧，比如

 THIS<br>IS AN<span class="important"><br>important<br></span>SENTENCE<br>

...但我似乎无法获得线高。我究竟做错了什么？

4

4 回答 4

2

这是使用的标记的副作用。<br>用块级容器替换换行符 ( ) 以实现所需的行为（将单词堆叠在一起），例如：

HTML

<div>THIS</div>
<div>IS AN</div>
<div class="important">important</div>
<div>SENTENCE</div>​

您也可能会丢失line-height声明，因为它不再有任何用途：

CSS

body {
    font-size: 8em;
}
.important {
    font-size: 0.5em;
}​

参考

注意：您可以使用任何块级元素，例如div容器或p元素。段落在语义上会更合适，但您应该注意应用于它们的任何默认样式，例如厚填充、底部边距等。

于 2012-07-08T17:00:57.350 回答
1

行高是一件很难精确控制的事情，因为不同的浏览器和操作系统解释计算方式的方式各不相同。Adam Twardoch在 webfonts.info 上写了关于行高如何随浏览器变化的文章，其中还有一篇关于使用 line-height的更一般的文章。

行高控件并非真正用于更多“图形”布局，而是设计人员工具箱的一部分，用于设置清晰的段落。正如 Eliran 所说，使用块元素来做你想做的事情。这样您就可以更准确地控制定位。

于 2012-07-08T18:16:37.560 回答
1

我不知道这是否是最干净的方式，但我已经成功地为这样的文本提供了负边距，而不是调整行高。

于 2012-07-08T18:31:18.140 回答
0

我通常更喜欢<p>调整行高。尝试这样的事情：

CSS：

p.important
{
    font-size: 0.5em;
    line-height: 0.5em;
}

HTML：

THIS<br>IS AN<br><p class="important">important</p><br>SENTENCE<br>
于 2012-07-08T17:05:21.737 回答