<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>CSS截取中英文混合字符串长度</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style type="text/css"> body{font-size:14px;} .myCls0{ width:580px; border:1px solid red; } .myCls1{ width:580px; border:1px solid red; } .myCls2{ width:580px; border:1px solid red; overflow:hidden; /* 超出隐藏 */ text-overflow:clip; /* 文本超出截取 */ } .myCls3{ width:580px; border:1px solid red; overflow:hidden; /* 超出隐藏 */ text-overflow:ellipsis; /* 文本超出截取，并用...代替 */ } </style> </head> <body> 使用overflow:hidden; text-overflow:ellipsis;两CSS样式属性，可以巧妙的实现截取中英文混合字符串长度的问题，<br /> 以往通过后台程序控制标题长度显示，往往效果不理想，而且前端一旦有调整后台也得调整，使用这两个属性问题解决了！！<br /><br /><br /> <div class="myCls0"> 勇敢做自己，永远都不迟。It's never too late to be what you might have been. 这话送给你，good lucky! </div> <br /> <i>文本不加 nobr 标签，也不设置text-overflow、text-overflow属性</i> <br /><br /><br /><br /> <div class="myCls1"> <nobr>勇敢做自己，永远都不迟。It's never too late to be what you might have been. 这话送给你，good lucky!</nobr> </div> <br /> <i>文本加 nobr 标签，不设置text-overflow、text-overflow属性，结果就真的没有换行，超出来了</i> <br /><br /><br /><br /> <div class="myCls2"> <nobr>勇敢做自己，永远都不迟。It's never too late to be what you might have been. 这话送给你，good lucky!</nobr> </div> <br /> <i>文本加 nobr 标签，设置text-overflow:hidden、text-overflow:clip属性，结果超出的文本被截取了</i> <br /><br /><br /><br /> <div class="myCls3"> <nobr>勇敢做自己，永远都不迟。It's never too late to be what you might have been. 这话送给你，good lucky!</nobr> </div> <br /> <i>文本加 nobr 标签，设置text-overflow:hidden、text-overflow:ellipsis属性，结果超出的文本被截取了，并用...代替</i> </body> </html>