Question

<div style="width:200px; margin:0 auto;"> 01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921.........
</div>

上面的代码显示了一个长滚动条。我希望将其保持在div的声明宽度（width: 200px;）内，而不进行滚动。我试过浮动，显示，位置，溢出，但这里没有任何作用。

Answer 1

备选方案，您可以使用overflow-wrap: break-word;。还要避免使用内联样式。

<强> CSS

div{
    width: 200px;
    margin: 0 auto;
    overflow-wrap: break-word;
    word-wrap: break-word; /* Firefox support */
}

Fiddle

Answer 2

试试这个： -

word-wrap: break-word;

DEMO：http://jsfiddle.net/dwebexperts/thyD9/

Answer 3

<div style="width:200px; margin:0 auto; word-wrap:break-word;">    01234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921.........
</div>

JSFiddle：http://jsfiddle.net/Emr84/

Answer 4

试试这个：

div {
    width:200px;
    margin:0 auto;
    white-space: pre-wrap;      /* CSS3 */   
    white-space: -moz-pre-wrap; /* Firefox */   
    white-space: -o-pre-wrap;   /* Opera 7 */    
    word-wrap: break-word;      /* IE */
}

注意：避免使用inline样式。

Demo

Answer 5

尝试使用这些CSS规则

 white-space: nowrap;      //keep the text on one line
 overflow: hidden;         //prevent the text from being shown outside the border
 text-overflow: ellipsis;  //cut off text with an elipsis

Answer 6

使用text-overflow: ellipsis;。

完整说明：http://quirksmode.org/css/user-interface/textoverflow.html

Answer 7

对我来说，工作之后，我的div位于可滚动的父div内，只需添加到您的孩子或内容div即可

    div{
        white-space: normal;
        }

OR

    div{
    white-space: pre-wrap;
    }

如何在没有滚动的div中包装长文本

7 个答案: