为什么div中的文字出现在浏览器之外？

Question

有“div”，宽度为“100px”

<div style=" width:190px;border:1px solid #DAD7D7;border-radius:5px;padding:5px;">
  text,text,text,text,text,text,text,text,text,text,
</div>

问题是div框架之外的文本。什么是解决方案无论空间如何？

Answer 1

您可以使用

将其分为两行

word-break: break-all;

http://jsfiddle.net/uaaytgfq/

或者您可以设置溢出（显示滚动条或隐藏元素外的所有内容）：

div {overflow: auto}

http://jsfiddle.net/uaaytgfq/1/

div {overflow: hidden}

http://jsfiddle.net/uaaytgfq/2/

Answer 2

使用word-wrap: break-word;

＆＃13;

＆＃13;

div {
    width:190px;
    border:1px solid #DAD7D7;
    border-radius:5px;
    padding:5px;
    word-wrap: break-word;
}

＆＃13;

<div>text,text,text,text,text,text,text,text,text,text,</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

使用min-width并显示内联

＆＃13;

＆＃13;

<div style="min-width:190px;border:1px solid #DAD7D7;border-radius:5px;padding:5px; display: inline">
  text,text,text,text,text,text,text,text,text,text,
</div>

＆＃13;

＆＃13;

＆＃13;