Question

我有一个300px宽度的div，当我在其中填充文本时，只有当用户输入普通文本时，“Hello，will，my name is kesong”，如果句子太长，它会自动从下一行开始，因为div可以检测最后一个单词是否可以保存在同一行中。但是，如果用户输入的内容类似于每个长文本，它们之间没有任何空格，例如“HELLOWOLRDTHISISKESONGHELLOWOLRDTHISISKESONG ... “超过了div的宽度，文本不会被截断，并且会显示在同一行的div之外。

Answer 1

看看这个jsfiddle：http://jsfiddle.net/yM2vL/1/

基本上，你需要设置

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

CSS中的

（或硬编码风格，但CSS更清晰）。如果要完全删除文本，请使用：

text-overflow: clip;

有关其他选项，请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

Answer 2

您可能希望使用word-wrap和white-space CSS属性的组合。

这是一个潜在的解决方案（以下指南针mixin 受到很大启发）：

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
}

如果你想在某些情况下实际切断文本（即没有空格的长词），而是在其他情况下包装文本（即许多带空格的单词），那么这将是一个相当多的参与。我不认为这种情况下只有纯CSS的解决方案，你可能需要结合使用Javascript和CSS text-overflow property with ellipsis。

当文本超过div的宽度时如何切断文本

2 个答案: