Question

如果文本是一行而且太长而且白色空格的白色会使div水平滚动但是我想让它以两行或更多行显示是否有任何css技巧来实现它？

Answer 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;
}

Answer 2

您可以使用自动换行，溢出换行和分词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

Answer 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 */
}

一行文字使div水平滚动

3 个答案: