• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • text-overflow

    版本:CSS3

    text-overflow CSS 属性确定如何向用户发出未显示的溢出内容信号。它可以被剪切,显示一个省略号('...')或显示一个自定义字符串。

    示例

    /* Overflow behavior at line end
       Right end if ltr, left end if rtl */
    text-overflow: clip;
    text-overflow: ellipsis;
    text-overflow: "…";
    text-overflow: fade;
    text-overflow: fade(10px);
    text-overflow: fade(5%);
    
    /* Overflow behavior at left end | at right end
       Directionality has no influence */
    text-overflow: clip ellipsis;
    text-overflow: "…" "…";
    text-overflow: fade clip;
    text-overflow: fade(10px) fade(10px);
    text-overflow: fade(5%) fade(5%);
    
    /* Global values */
    text-overflow: inherit;
    text-overflow: initial;
    text-overflow: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持text-overflow

    语法:

    语法:

    text-overflow:clip|ellipsis| <string>
    • 一般在容器的极限处进行截断。如果想在裁剪处显示空白符,可以使用('').
    • 这个属性只对那些在块级元素溢出的内容有效,但是必须要与块级元素内联(inline)方向一致(举个反例:内容在盒子的下方溢出。此时就不会生效)。文本可能在以下情况下溢出:当其因为某种原因而无法换行(例子:设置了white-space:nowrap),或者一个单词因为太长而不能合理地被安置。
    • 这个属性并不会强制“溢出”事件的发生,因此为了能让text-overflow能够生效,必须要在元素上添加几个额外的属性,比如将overflow设置为hidden

    取值:

    • clip:此为默认值。这个关键字的意思是"在内容区域的极限处截断文本",因此在字符的中间可能会发生截断。为了能在两个字符过渡处截断,你必须使用一个空字符串值('')。
    • ellipsis:这个关键字的意思是“用一个省略号('…')来表示被截断的文本”。这个省略号被添加在内容区域中,因此会减少显示的文本。如果空间太小到连省略号都容纳不下,那么这个省略号也会被截断。
    • <string>:用来表示被截断的文本。字符串内容将被添加在内容区域中,所以会减少显示出的文本。如果空间太小到连省略号都容纳不下,那么这个字符串也会被截断。
    默认值clip
    适用于块级容器元素
    继承性
    动画性
    计算值指定值

    实例

    p {
      width: 200px;
      border: 1px solid;
      padding: 2px 5px;
    
      /* BOTH of the following are required for text-overflow */
      white-space: nowrap;
      overflow: hidden;
    }
    
    .overflow-visible {
      white-space: initial;
    }
    
    .overflow-clip {
      text-overflow: clip;
    }
    
    .overflow-ellipsis {
      text-overflow: ellipsis;
    }
    
    .overflow-string {
      /* Not supported in most browsers, 
         see the 'Browser compatibility' section below */
      text-overflow: " [..]"; 
    }
    
    
    <p class="overflow-visible">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="overflow-clip">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="overflow-ellipsis">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p class="overflow-string">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    

    上篇:attr()