text-overflow属性怎么用

2024-01-17 15:35 小编

     CSS3text-overflow属性

 

  作用:text-overflow属性规定当文本溢出包含元素时发生的事情。

 

  语法:

 

  text-overflow:clip|ellipsis|string;

 

  clip:修剪文本。

 

  ellipsis:显示省略符号来代表被修剪的文本。

 

  string:使用给定的字符串来代表被修剪的文本。

 

  注:所有主流浏览器都支持text-overflow属性。

 

  CSS3text-overflow属性的使用示例

 

  <!DOCTYPEhtml>

 

  <html>

 

  <head>

 

  <metacharset="utf-8">

 

  <style>

 

  div.test

 

  {

 

  white-space:nowrap;

 

  width:12em;

 

  overflow:hidden;

 

  border:1pxsolid#000000;

 

  }

 

  div.test:hover

 

  {

 

  text-overflow:inherit;

 

  overflow:visible;

 

  }

 

  </style>

 

  </head>

 

  <body>

 

  <p>将鼠标移动到框内,查看效果.</p>

 

  <divclass="test"style="text-overflow:ellipsis;">Thisissomelongtextthatwillnotfitinthebox</div>

 

  <br>

 

  <divclass="test"style="text-overflow:clip;">Thisissomelongtextthatwillnotfitinthebox</div>

 

  </body>

 

  </html>


Tag: 怎么
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码