Html 删除块元素中的多余空间

我更喜欢提供实际的代码来解决这个问题。我有以下工作代码

.vc节标题{
文本对齐：左对齐；
}
.vc节标题sup txt{
显示：块；
颜色：#b18d56；
}
.vc节标题h1{
填充顶部：0；
左侧填充：30px；
右侧填充：30px；
颜色：#1a2431；
字体大小：34px；
}
.vc节标题h1{
边际上限：0；
边缘底部：30px；
文本转换：大写；
位置：相对位置；
显示：内联块；
填充顶部：10px；
垫底：10px；
字体大小：34px；
}
.vc节标题h1：之后，
.vc章节标题h1：之前{
位置：绝对位置；
宽度：自动；
底部：自动；
左：自动；
最高：50%；
-webkit转换：translateY（-65%）！重要；
-莫兹变换：translateY（-65%）！重要；
-ms转换：translateY（-65%）！重要；
-o-变换：translateY（-65%）！重要；
转换：translateY（-65%）！重要；
颜色：#b18d56；
}
.vc章节标题h1：之前{
内容：“[”；
左：0！重要；
右：自动！重要；
}
.vc章节标题h1：之后{
内容：']'；
右：0！重要；
左：自动！重要；
}

欢迎来到我们的行业
我们有25年的经验

以下是js解决方案

修改的html

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

---

我在标题中添加了边距（而不是填充），这样可以使用

-20px

将

:before

和

:before

移动到边距中

@媒体屏幕和（最大宽度：767px）{
.vc节标题h1{
最大宽度：320px；
}
}
.vc节标题sup txt{
显示：块；
颜色：#b18d56；
}
.vc节标题h1{
利润率：0.20px；
颜色：#1a2431；
边际上限：0；
边缘底部：30px；
位置：相对位置；
显示：内联块；
填充顶部：10px；
垫底：10px；
字体大小：34px；
}
.vc节标题h1：之后，
.vc章节标题h1：之前{
位置：绝对位置；
宽度：自动；
底部：自动；
左：自动；
最高：50%；
转换：translateY（-65%）！重要；
颜色：#b18d56；
}
.vc章节标题h1：之前{
内容：“[”；
左：-20px；
}
.vc章节标题h1：之后{
内容：']'；
右：-20px；
}

欢迎来到我们的行业
我们有25年的经验

尝试添加

文本对齐：对齐

到

h1

以填充所有空间

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

---

字体大小如何：30px@Jaydeppatel这是设计。与此无关，先生

.vc部分标题h1{width:100%}

像这样吗？@Roy我试过了。但它没有改变。实际上我试过内联，内联块和一些宽度的东西。因为h1和span的值是动态的，所以我可以选择一个像素value@Ramesh但是，你需要什么？上下经验？谢谢你花时间回答这个问题，先生。在您的回答中，

]

以行结尾。相反，我希望括号以整个内容结尾，并垂直居中对齐。您想要javascript解决方案吗？不是问题。Go ahead修改了js解决方案的答案您是否对css进行了任何更改？这必须是输出。但是内容超出了父元素的宽度。设置正文

宽度：500px

，但内部内容仍然超出正文宽度。@Ramesh我明白你的意思了！您可以添加媒体查询，以便为较小的设备设置最大宽度，从而使其堆叠？我已经更新了上面的答案-你可以全屏查看不同的内容：-）内容是动态的，正如我在评论部分提到的。当内容较小时，它不需要媒体查询，因为查询取决于内容。让我们说一句话，比如“你好，我来这里是想说我没有做好充分的准备”，上面句子中的所有单词都只有很少几个字母。因此，它对多分区中断进行了重大更改points@Ramesh. 是的，我可以看出这个字符串也能工作-你试过上面的代码吗？括号被设置在块的末尾，不管有多少个单词。通过媒体查询，您只需确保块不会在较小的设备上溢出：-）它会在单词之间添加更多的空格。

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