<!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>
