无法在文本和div的边界之间创建相等的间隙

Question

我有2个div，内部div和一个包装div。

1。我希望内部div始终在包装div内居中。

2。我想在文本和内部div的边框之间始终在左侧和右侧保持15个像素的间隙/间隔。

请检查这张我用来说明问题的图像：

https://i.ibb.co/Df2gxmF/Divs-Image.jpg

您可以看到它显示了三种情况：

1。可以，我的左右间隙为15像素。

2。这是我要解决的问题，当文本中包含一个长单词并且我按照视图的宽度（浏览器的宽度）玩耍时，我会变得越来越大不需要的右侧，在文本和div的边框之间。

3。这是我想要要做的。

这是我的小提琴代码：

https://jsfiddle.net/725r9fty

CSS：

.wrapper{
  border: 1px solid black;
  text-align: center;
  padding: 25px;
  margin: auto;
  width: 50%;
}

.divForText{
  background-color: #EEEEEE;
  border: 1px solid blue;
  display: inline-block;
  text-align: left;
  padding: 15px;
  margin: auto;
}

HTML：

<div class="wrapper">
<div class="divForText">
Text... Text... Text... Text... Text... Text... 
LongWordToTestGapProblem Text...  Text...
</div>
</div>

• 我只想使用纯HTML和CSS，而没有JavaScript。

• 我不想在中间打断字。

• 请，如果您认为您有解决方案，请尝试在我提供的小提琴链接中首先对其进行测试，该过程不会超过20-30秒。

谢谢！

Answer 1

仅需要如下替换css中居中的text-align：left即可

.divForText{
  text-align: center;

}