我用方括号包裹了标题,但在移动设备上它看起来很难看。如果文本转到下一行,我们如何在文本周围保留方括号。
这是 HTML 和 CSS 代码
.widget-title:before {
content: '[';
color: #ffb1bb;
font-size: 60px;
text-align: right;
padding-right: 10px;
}
.widget-title:after {
content: ']';
color: #ffb1bb;
font-size: 60px;
text-align: left;
padding-left: 10px;
}
<h4 class="widget-title widgettitle">WHAT’S NEW</h4>
最佳答案
更新:这适用于溢出到第二行的第一行。
如果您可以使用 flexbox
,将其添加到 widget-title
就足够了:
display: flex;
align-items: center;
请看下面的演示:
.widget-title {
display: flex;
align-items: center;
}
.widget-title:before {
content: '[';
color: #ffb1bb;
font-size: 60px;
text-align: right;
padding-right: 10px;
}
.widget-title:after {
content: ']';
color: #ffb1bb;
font-size: 60px;
text-align: left;
padding-left: 10px;
}
<div class="widget-title">This is a very long title, and too long as it is now. This is a very long title, and too long as it is now. This is a very long title, and too long as it is now</div>
关于html - 在多行文本周围绘制方括号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41790586/