使用 CSS 更改标题外观

我在为网页创建标题时遇到问题。这是标题：

<!DOCTYPE html>
<html>
<head>
<style>
.title {
border-top: 2px solid grey;
color: grey;
text-size:20px;
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>

我需要将市场词移到底部，它应该像这样显示：

Düsseldorf 
markets

知道如何仅在 CSS 的帮助下做到这一点(即如何更改标题 CSS 类以获得所需的视图(？

如果你真的只想使用 CSS，你可以使用 CSS hack 来实现这一点。首先，通过将文本设置为背景的颜色来使文本消失。然后使用before和after选择器重新呈现内容。

但是，更容易的是在您的 HTML 中使用span标记，然后使它们中的每一个都有display: block以获得换行符。

例：

<!DOCTYPE html>
<html>
<head>
<style>
:root {
--font_size: 20px;
--text_col: grey;
--text_margin: 10px;
}
.title {
border-top: 2px solid grey;
font-size: var(--font_size);
color: white;
}
.title:before {
content: "Düsseldorf";
color: var(--text_col);
position: absolute;
left: 10px;
top: var(--text_margin);
}
.title:after {
content: "markets";
color: var(--text_col);
position: absolute;
left: 10px;
top: calc(var(--font_size) + var(--text_margin));
}
</style>
</head>
<body>
<div class="title">Düsseldorf markets</div>
</body>
</html>

您可以在计算中使用右填充。padding-right: calc(100% - 10ch);这很简单，并不复杂。

.title {
border-top: 2px solid grey;
color: grey;
font-size: 20px;
padding-right: calc(100% - 10ch); /* Düsseldorf is 10 character */
box-sizing: border-box;
}

<div class="title">Düsseldorf markets</div>

解决此问题的一种简单方法 - 在元素上使用width属性。然后，根据word-break规则(默认情况下是"正常"，您无需指定此规则(，当容器上没有空闲位置时，单词将在下一行自动换行

这是演示

附言而且你有一个错字 - 你的意思是除了text-size之外font-size吗？

相关内容

最新更新

热门标签：