Question

我用方括号包裹标题但在移动设备上看起来很难看。如果文本转到下一行，我们如何在文本周围保留方括号。

这是HTML和CSS代码

＆＃13;

.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;
}

＆＃13;

<h4 class="widget-title widgettitle">WHAT’S NEW</h4>

＆＃13;

Answer 1

如果您可以使用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>

Answer 2

将样式赋予父元素。

try--

＆＃13;

.parent_of_widget-title:before {
    content: '[';
    color: #ffb1bb;
    font-size: 60px;
    text-align: right;
    padding-right: 10px;
}

.parent_of_widget-title:after {
    content: ']';
    color: #ffb1bb;
    font-size: 60px;
    text-align: left;
    padding-left: 10px;
}

＆＃13;

Answer 3

这是另一种可以在不使用任何伪元素的情况下实现此目的的方法。

<强>步骤：

创建一个类似<div>或<span>的元素，并将其设为inline-block元素，使其长度依赖于其内容，即此元素的长度与其中的内容一样长
应用左/右边框。
使用linear-gradient()创建4张具有特定width / height的背景图片，并使用background-position在框的每个角上绘图。

必要的CSS：

div {
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb),
                    linear-gradient(#ffb1bb, #ffb1bb);

  background-repeat: no-repeat;
  background-size: 8px 3px;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  border-width: 0 3px;
}

有用的资源：

线性渐变：MDN，W3。
背景图片：MDN，W3。

输出图片：

＆＃13;

* {box-sizing: border-box;}

body {
  background: linear-gradient(white, silver);
  min-height: 100vh;
  margin: 0;
}

.widget-title {
  font: 20px/26px Arial, sans-serif;
  background-image: linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb),
    linear-gradient(#ffb1bb, #ffb1bb);
  
  background-repeat: no-repeat;
  background-size: 8px 3px;
  background-position: top left, top right, bottom left, bottom right;

  border: solid #ffb1bb;
  text-align: justify;
  border-width: 0 3px;
  display: inline-block;
  vertical-align: top;
  padding: 5px 15px;
  margin: 20px;
}

＆＃13;

<h4 class="widget-title widgettitle">WHAT’S NEW</h4>

<h4 class="widget-title widgettitle">This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence,This is some dummy and multiline text and nothing meaning in this sentence...</h4>

＆＃13;

在多行文本周围绘制方括号

3 个答案: