html - 删除 block 元素中的多余空间

Question

我更喜欢提供对这个问题有意义的实际代码。我有以下工作代码。

.vc-section-heading {
  text-align: left;
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  padding-top: 0;
  padding-left: 30px;
  padding-right: 30px;
  color: #1a2431;
  font-size: 34px;
}

.vc-section-heading h1 {
  margin-top: 0;
  margin-bottom: 30px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  width: auto;
  bottom: auto;
  left: auto;
  top: 50%;
  -webkit-transform: translateY(-65%) !important;
  -moz-transform: translateY(-65%) !important;
  -ms-transform: translateY(-65%) !important;
  -o-transform: translateY(-65%) !important;
  transform: translateY(-65%) !important;
  color: #b18d56;
}

.vc-section-heading h1:before {
  content: '[';
  left: 0 !important;
  right: auto !important;
}

.vc-section-heading h1:after {
  content: ']';
  right: 0 !important;
  left: auto !important;
}

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1 style="text-transform: none;/* display: inline; */">We Have 25 Years Of Experience</h1>
</div>

这里我遇到了响应式设计的问题。对于 iPad 或更小的设备，h1 的内容会插入下一行，但 h1:after 不适合宽度。它位于 Angular 落并提供意想不到的空间。

为了更清楚，我在这里将 body width 设置为 500px。

BODY {
  WIDTH: 500PX;
}

.vc-section-heading {
  text-align: left;
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  padding-top: 0;
  padding-left: 30px;
  padding-right: 30px;
  color: #1a2431;
  font-size: 34px;
}

.vc-section-heading h1 {
  margin-top: 0;
  margin-bottom: 30px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  width: auto;
  bottom: auto;
  left: auto;
  top: 50%;
  -webkit-transform: translateY(-65%) !important;
  -moz-transform: translateY(-65%) !important;
  -ms-transform: translateY(-65%) !important;
  -o-transform: translateY(-65%) !important;
  transform: translateY(-65%) !important;
  color: #b18d56;
}

.vc-section-heading h1:before {
  content: '[';
  left: 0 !important;
  right: auto !important;
}

.vc-section-heading h1:after {
  content: ']';
  right: 0 !important;
  left: auto !important;
}

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1 style="text-transform: none;/* display: inline; */">We Have 25 Years Of Experience</h1>
</div>

正如您在此处看到的，文本 Experience 转到了下一行，而 ] 保留在末尾，其中包含内容的空格。如何删除这个不需要的空间？

我目前得到的输出是，

我正在寻找的输出是，

Answer 1

我在标题中添加了边距(而不是填充)，这样您就可以使用 - 将 :before 和 :after 移动到边距中20px.

@media screen and (max-width:767px) {
  .vc-section-heading h1 {
    max-width: 320px;
  }
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  margin: 0 20px;
  color: #1a2431;
  margin-top: 0;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  width: auto;
  bottom: auto;
  left: auto;
  top: 50%;
  transform: translateY(-65%) !important;
  color: #b18d56;
}

.vc-section-heading h1:before {
  content: '[';
  left: -20px;
}

.vc-section-heading h1:after {
  content: ']';
  right: -20px;
}

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1>We Have 25 Years Of Experience</h1>
</div>

您可以在此处看到它处理不同长度的文本:

@media screen and (max-width:797px) {
  .vc-section-heading {
    max-width: 320px;
  }
}

.vc-section-heading-sup-txt {
  display: block;
  color: #b18d56;
}

.vc-section-heading h1 {
  margin: 0 20px;
  color: #1a2431;
  margin-top: 0;
  margin-bottom: 30px;
  position: relative;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 34px;
}

.vc-section-heading h1:after,
.vc-section-heading h1:before {
  position: absolute;
  width: auto;
  bottom: auto;
  left: auto;
  top: 50%;
  transform: translateY(-65%) !important;
  color: #b18d56;
}

.vc-section-heading h1:before {
  content: '[';
  left: -20px;
}

.vc-section-heading h1:after {
  content: ']';
  right: -20px;
}

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1>We Have 25 Years</h1>
</div>

<div class="vc-section-heading">
  <span class="vc-section-heading-sup-txt">Welcome To Our Industry</span>
  <h1>We Have 25 Years Of Experience this text string is a lot longer</h1>
</div>