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

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以获取其他选项