css div寬度自動隱藏並且顯省略符號

來源:互聯網
上載者:User

<html xmlns="http://www.111cn.net/1999/xhtml">
<head>
<title>css div寬度自動隱藏並且顯省略符號</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代碼加到<head>與</head>之間-->
<style type="text/css">
 #abc{
 display:block;/*內聯對象需加*/
 width:200px;
 word-break:keep-all;/* 不換行 */
 white-space:nowrap;/* 不換行 */
 overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
 text-overflow:ellips教程is;/* 當對象內文本溢出時顯示省略標記(...) ;需與overflow:hidden;一起使*/
 }
 #cde{
  width:200px; /* 必須設定寬度 */
  word-break:keep-all;/* 不換行 */
  white-space:nowrap;/* 不換行 */
  overflow:hidden;/* 內容超出寬度時隱藏超出部分的內容 */
  text-overflow:ellipsis;/
 }
</style>
</head>
<body>
<div  id="abc">
fdsafdsaklfdjsaklf;djakl;fdjsakf;djsakfldajfklda;fjdsakl
</div>
<div  id="cde">
中國WEB第一站www.111cn.net提供最新的網頁製作教程教程、網頁設計教程、網頁特效教程,為個人網站提供網頁素材模板和網頁視頻學習
</div>
</body>
</html>

 

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.