使用CSS更改标题外观
使用CSS更改标题外观
提问于 2020-06-25 02:17:47
我在为网页创建标题时遇到问题。标题如下：
<!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类，以获得所需的视图)？
回答 3
Stack Overflow用户
回答已采纳
发布于 2020-06-25 02:38:48
您可以使用padding-right进行计算。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>
Stack Overflow用户
发布于 2020-06-25 02:26:16
如果你真的只想使用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>
Stack Overflow用户
发布于 2020-06-25 02:31:35
解决这个问题的一种简单方法是在元素上使用width属性。然后，根据word-break规则(默认情况下是'normal‘，你不需要指定这个)，当容器上没有空位时，单词将在下一行自动换行
另外，你有一个拼写错误--除了text-size，你是指font-size吗？
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62561619
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号