Question

我试图让div中的单词自动适应div的大小。如果div很小，div内的单词应缩小以容纳div。如果div很大，div内的单词应该伸展以适合div。我怎么做到这一点？谢谢。

#hello {
width: 50px;
height: 50px;
border: 1px solid black;
}

<div id = 'hello'>
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>

Answer 1

使用，css属性：

text-align: justify;
text-justify: inter-word;

段：

＆＃13;

#hello {
  width: 200px;
  border: 1px solid black;
  text-align: justify;
  text-justify: inter-word;
}

＆＃13;

<div id='hello'>
  Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
  Hello Hello Hello
</div>

＆＃13;

Answer 2

您可以放置overflow: scroll;以便div获取滚动条，内容将位于div中。

＆＃13;

#hello {
width: 50px;
height: 50px;
border: 1px solid black;
overflow: scroll;
}

＆＃13;

<div id = 'hello'>
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
Hello Hello Hello Hello Hello Hello Hello Hello Hello
</div>

＆＃13;

Answer 3

试试这段代码，希望它会对你有帮助。

CSS：

<style>
    #hello {
        border: 1px solid black;
        display: inline-table;
        height: 50px;
        padding: 1%;
        width: 25%;
    }
</style>

HTML：

<div id='hello'>
    Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello
    Hello Hello Hello
</div>

JSFiddle：http://jsfiddle.net/mananpatel/zt3qbsa9/

如何在div中进行文本自动修复？

3 个答案:

CSS：

HTML：