删除块元素中的多余空间

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的宽度不合适。它停留在拐角处并提供了意外的空间。

为了更加清楚，我在此处将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>

Answer 2

这是js解决方案。

https://jsfiddle.net/moorthyrweb/hgfs9kb3/3/

修改后的html

<h1>
   <span>We Have 25 Years Of Experience</span>
</h1>

javascript

function fitWidth(el) {
    el.style.width = '';
  // Add 1 to fix floating point error correction
  el.style.width = `${el.children[0].offsetWidth + 1}px`;
  el.style.display = '';
}

const element = document.querySelector('h1');
fitWidth(element);

// If body width is not fixed, you can call it in resize event
window.addEventListener('resize', function() {
    fitWidth(element);
})

Answer 3

尝试将text-align: justify;添加到h1来填充所有空间。

.vc-section-heading h1 {
  text-align: justify;
}