一行文字使div水平滚动[重复]答案

【问题标题】：One line text makes div scroll horizantally [duplicate]一行文字使div水平滚动[重复]
【发布时间】：2016-05-06 00:46:57
【问题描述】：

如果文本是一行并且太长并且没有任何空白使 div 水平滚动，但我希望它显示在两行或多行中，是否有任何 css 技巧可以做到这一点？

【问题讨论】：

标签： html css

【解决方案1】：

请记住，您使它与所有浏览器兼容

.wrapword{
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
white-space: -webkit-pre-wrap; /*Chrome & Safari */ 
white-space: -pre-wrap;      /* Opera 4-6 */
white-space: -o-pre-wrap;    /* Opera 7 */
white-space: pre-wrap;       /* css-3 */
word-wrap: break-word;       /* Internet Explorer 5.5+ */
word-break: break-all;
white-space: normal;
}

【讨论】：

【解决方案2】：

您可以使用 word-wrap、overflow-wrap 和 word-break CSS 属性：

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks         things wherever */
  word-break: break-all;
   /* Instead use this non-standard one: */
   word-break: break-word;

   /* Optional: Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
   hyphens: auto;

}

来源：https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/

短版：

.dont-break-out {
     word-wrap: break-word;
}

来源：http://www.w3schools.com/cssref/css3_pr_word-wrap.asp

【讨论】：

【解决方案3】：

为那个div使用这个类

.wrap { 
   white-space: pre-wrap;      /* CSS3 */
   white-space: -moz-pre-wrap; /* Firefox */
   white-space: -pre-wrap;     /* Opera <7 */
   white-space: -o-pre-wrap;   /* Opera 7 */
   word-wrap: break-word;      /* IE */
}

【讨论】：