单词突破中断溢出

Question

一种风格

#test {
    overflow-x: auto;
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    width: 99%;
    word-wrap: break-word;
}
#wrap {
    margin: 0 auto; width: 50%;
}

div中的单词=＆＃34; test＆＃34;打破像：

no  //this is end of first line
thing //this is beginning of the next line

<div id="wrap">
    <div id="test"></div>
</div>

原始单词为nothing

如何解决这个问题？

Answer 1

仅使用white-space: nowrap;获取整个单词而不会中断。但我确信在no和thing之间无法删除空格，除非您从文本中删除并将其写为nothing

#test {
    overflow-x: auto;
    white-space: nowrap;
    width: 99%;
    word-wrap: normal;
}
#wrap {
    margin: 0 auto; width: 50%;
}

<div id="wrap">
    <div id="test">
  no 
thing
  </div>
</div>