CSS截取中英文混合字符串长度

<!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>
上一篇:JavaScript的Date对象


下一篇:PHP获取中英文混合字符串长度及截取