html - 单词在换行符上中断并溢出

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 id="test"中的单词如下:

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>