Html 当文本超过div的宽度时，如何剪切文本

我有一个300像素宽的div，当我填充文本时，只有当用户键入一个普通文本，如“Hello，Wild，我的名字是kesong”，如果句子太长，它会自动从下一行开始，因为div可以检测最后一个单词是否可以保留在同一行中。但是，如果用户在每一个长文本之间输入一个类似于“HelloWorldThisKesong HelloWorldThisKesong…”的内容，而该内容超出了div的宽度，则文本将不会被截断，并将显示在div之外的同一行。

请查看此JSFIDLE：

基本上，你需要设置

text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; 

在CSS中（或硬编码样式，但CSS更干净）。如果要完全删除文本，请使用

剪辑

而不是

省略号

---

请参阅：对于其他选项，您可能希望使用和CSS属性的组合

下面是一个潜在的解决方案（深受以下指南针的启发）：

---

如果您想在某些情况下（例如，长单词没有空格）切掉文本，但在其他情况下（例如，许多单词有空格）将文本换行，那么这将是一个相当复杂的问题。我认为对于这种情况没有一个纯CSS的解决方案，而且您可能需要Javascript和CSS的组合。

word wrap

就是您想要的。@user3385402，很棒，问题解决方案Dont forget overflow:hiddenOr更好，因为经常有完全错误的信息。

div {
  word-wrap: break-word;
  white-space: pre;
  // CSS 2.0
  white-space: pre-wrap;
  // CSS 2.1
  white-space: pre-line;
  // CSS 3.0
  white-space: -pre-wrap;
  // Opera 4-6
  white-space: -o-pre-wrap;
  // Opera 7
  white-space: -moz-pre-wrap;
  // Mozilla
  white-space: -hp-pre-wrap;
  // HP Printers
}