使用CSS截字实例_钢筋笼滚焊机- 钢筋笼设备-应用笔记

使用CSS截字实例_钢筋笼滚焊机- 钢筋笼设备-应用笔记_百度空间

为了照顾表现上的需要，通常需要把过长的句子，如一个列表中的标题截短。通常这由程序员使用后台技术(各种流行的语言PHP, JSP等)或者前台技术(JavaScript)来处理。我个人倾向于使用前台技术，因为这对提高网页的亲和力(accessibility)有好处。在非桌面型的浏览器中，用户可以更方便的掌握信息完整性。下面是具体实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh">
<head>
 <title>使用CSS截字</title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style type="text/css">
  * { margin: 0; padding: 0; }
  a { text-decoration: none; color: #df3a0e; }
  ul { width: 200px; margin: 40px auto; padding: 12px 4px 12px 24px; border: 1px solid #005fb0; background: #e0f1ff; }
  li { margin: 12px 0; width: 200px; }
  li a { display: block; width: 200px; overflow: hidden; white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
  /* firefox only */
   li:not(p) { /* wtf is? pls let me know*/ clear: both; }
   li:not(p) a { max-width: 170px; float: left; }
   li:not(p):after { content: "..."; float: left; width: 25px; padding-left: 5px; color: #df3a0e;}
 </style>
</head>
<body>
 <ul>
  <li><a href="#" title="钢筋笼滚焊机">钢筋笼滚焊机</a></li>
  <li><a href="#" title="钢筋笼成型机">钢筋笼成型机</a></li>
  <li><a href="#" title="厦门连环钢材加工有限公司">厦门连环钢材加工有限公司</a></li>
  <li><a href="#" title="钢筋笼加工新技术">钢筋笼加工新技术</a></li>
  <li><a href="#" title="自动化钢筋笼滚焊机">自动化钢筋笼滚焊机</a></li>
  <li><a href="#" title="钢筋笼加工设备">钢筋笼加工设备</a></li>
 </ul>
</body>
</html>

郑重声明：资讯【使用CSS截字实例_钢筋笼滚焊机- 钢筋笼设备-应用笔记_百度空间】由发布，版权归原作者及其所在单位，其原创性以及文中陈述文字和内容未经(企业库qiyeku.com)证实，请读者仅作参考，并请自行核实相关内容。若本文有侵犯到您的版权，请你提供相关证明及申请并与我们联系（qiyeku # qq.com）或【在线投诉】，我们审核后将会尽快处理。

—— 相关资讯 ——