无法创建适合文本大小的HTML Div元素 [英] Unable to create an HTML Div Element that Fits to the text size

问题描述

我无法获得一个div以适合其中文本的大小。

I'm unable to get a div to fit the size of the text inside of it.

我有2个div，我希望内部div能够：

I have 2 divs, and I want the inner div to:

1。安装在外部div内。

1. Fit inside the outer div.

2。 在包装div的内部居中。

2. Be centered inside the wrapping div.

我遇到的问题是，当我随着视图宽度的变化玩耍时，会遇到很多不必要的东西文本和div边框之间的距离，如下所示：

The problem I am experiencing is that when I play around with the width of the view, I am getting a large unwanted gap between the text and the div's border, as you can see here:

如何防止这种差距，而且；我如何才能使div中心位于大div内，使其大小足够大以适合其中的文本？

How can I prevent this gap, and furthermore; how can I make the div center inside the large div to make its size big enough to fit the text inside of it?

这是我的小提琴测试： https://jsfiddle.net/gv1xLd8s

Here is my fiddle test: https://jsfiddle.net/gv1xLd8s

我的HTML代码：

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

我的CSS代码：

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

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
}

谢谢！

（注意：我想使用纯HTML和CSS完成此操作）

(Note: I want to accomplish this using pure HTML and CSS)

推荐答案

您可以使用word-break：break all;因此校正后的CSS如下：

you could use word-break:break all; so your corrected css will be as follow:

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  word-break: break-all;

}

或

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  word-break: break-word;

}

不要忘记将其标记为已回答

don't forget to mark as answered if it works for you, as for others could help them.

或

使用overflow-x：hidden;使用CSS可以以一种不错的方式包装文本，有很多方法可以包装长文本，这也是一个有用的链接
这是一个有用的链接

use overflow-x:hidden; that should wrap the text in a decent way, with css there is a lot of ways you can wrap your long text, here is also a useful link here is a useful link

.divForText{
  border: 1px solid black;
  display: inline-block;
  text-align: left;
  padding: 15px;
  overflow-x: hidden;
  word-wrap: break-word;  
}

这篇关于无法创建适合文本大小的HTML Div元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！