mozilla

Compare Revisions

text-overflow

Change Revisions

Revision 25063:

Revision 25063 by teoli on

Revision 25064:

Revision 25064 by teoli on

Title:
text-overflow
text-overflow
Slug:
CSS/text-overflow
CSS/text-overflow
Tags:
css, NeedsTechnicalReview, "CSS Reference", CSS3, NeedsMobileBrowserCompatibility
css, NeedsTechnicalReview, "CSS Reference", CSS3, NeedsMobileBrowserCompatibility
Content:

Revision 25063
Revision 25064
nn7    <h2>
8      Summary
9    </h2>
10    <p>
11      The <code>text-overflow</code> CSS property determines how 
 >overflowed content that is not displayed is signaled to the users
 >. It can be clipped, display an ellipsis ('<code>…</code>', <code
 > style="text-transform:uppercase">U+2026 Horizontal Ellipsis</cod
 >e>) or a Web author-defined string.
12    </p>
13    <p>
14      <img alt="text-overflow.png" class="internal default" src="
 >/@api/deki/files/5846/=text-overflow.png" style="">
15    </p>
16    <p>
17      This CSS property doesn't force an overflow to occur, to do
 > so and make <code>text-overflow</code> to be applied, the author
 > must apply some additional properties on the element, like setti
 >ng {{ cssxref("overflow") }} to <code>hidden</code>.
18    </p>
19    <h2>
20      Syntax
21    </h2>
22    <pre class="eval">
23text-overflow: <em>end-overflow-type              </em><code>    
 >     <em>or</em></code>
24<em><code>text-overflow: </code></em><code><em>left-overflow-type
 ><code> </code>right-overflow-type</em></code>
25</pre>
26    <p>
27      where
28    </p>
29    <dl>
30      <dt style="margin-left: 40px;">
31        <em>end-overflow-type</em>
32      </dt>
33    </dl>
34    <dl>
35      <dd style="margin-left: 80px;">
36        Is an <code>&lt;overflow-type&gt;</code> CSS value descri
 >bing the overflow to perform at the end of the line. The end of t
 >he line is its <em>right</em> end if the text is written with <em
 >>left-to-right</em> directionality, it is its <em>left</em> end i
 >f the text is written with <em>right-to-left</em> directionality.
37      </dd>
38      <dt style="margin-left: 40px;">
39        <em>left-overflow-type</em>
40      </dt>
41      <dd style="margin-left: 80px;">
42        Is an <code>&lt;overflow-type&gt;</code> CSS value descri
 >bing the overflow to perform at the <em>left</em> end of the line
 >. The directionality of the text has no influence on which end of
 > the line is affected.
43      </dd>
44      <dt style="margin-left: 40px;">
45        <em>right-overflow-type</em>
46      </dt>
47      <dd style="margin-left: 80px;">
48        Is an <code>&lt;overflow-type&gt;</code> CSS value descri
 >bing the overflow to perform at the <em>right</em> end of the lin
 >e. The directionality of the text has no influence on which end o
 >f the line is affected.
49      </dd>
50    </dl>
n8      Summaryn52      <code>&lt;overflow-type&gt;</code>
n11      The <code>text-overflow</code> CSS property determines how n55      The &lt;overflow-type&gt; CSS type describes how text overf
>overflowed content that is not displayed is signaled to the users>low, when not visible, must be handled. The following values are 
>. It can be clipped, display an ellipsis ('<code>…</code>', <code>valid:
> style="text-transform:uppercase">U+2026 Horizontal Ellipsis</cod 
>e>) or a Web author-defined string. 
12    </p>
13    <p>
14      <img alt="text-overflow.png" class="internal default" src="
>/@api/deki/files/5846/=text-overflow.png" style=""> 
15    </p>
16    <p>
17      This CSS property doesn't force an overflow to occur, to do
> so and make <code>text-overflow</code> to be applied, the author 
> must apply some additional properties on the element. 
18    </p>
19    <h2>
20      Syntax
21    </h2>
22    <pre class="eval">
23text-overflow: <em>overflow-type       <code>         or
24text-overflow: </code></em><code><em>overflow-type<code> </code>o
>verflow-type</em></code> 
25</pre>
26    <p>
27      where
nn59        <code>clip</code>
60      </dt>
61      <dd>
62        This keyword value indicates to truncate the text at the 
 >limit of the content area. This is the default value.
63      </dd>
64      <dt>
n34        Display ellipses <strong>…</strong> (U+2026, <code>&amp;hn68        This keyword value indicates to display ellipses ('<code>
>ellip;</code>) to represent clipped text.>…</code>', <code style="text-transform:uppercase">U+2026 Horizont
 >al Ellipsis</code>) to represent clipped text. The ellipsis is di
 >splayed inside the content area, shortening more the size of the 
 >displayed text. If there is not enough place to display ellipsis,
 > they are clipped.
n37        <code>clip</code>n71        <em>string</em>
n40        Default value, clips text.n74        The {{ xref_cssstring() }} to be used to represent clippe
 >d text. The string is displayed inside the content area, shorteni
 >ng more the size of the displayed text. If there is not enough pl
 >ace to display string, they are clipped.
n43    <h3>n77    <h2>
n45    </h3>n79    </h2>
n49  width: 100%;                   /* IE6 needs any width */n83  width: 100%;                   
n52  -o-text-overflow: ellipsis;    /* Opera 9-10 */n
n56    <h3>n89    <h2>
90      Specifications
91    </h2>
92    <table class="standard-table">
93      <thead>
94        <tr style="background-color: rgb(255, 204, 255);">
95          <th scope="col">
96            Specification
97          </th>
98          <th scope="col">
99            Status
100          </th>
101          <th scope="col">
102            Comment
103          </th>
104        </tr>
105      </thead>
106      <tbody>
107        <tr>
108          <td>
109            <a class="external" href="http://dev.w3.org/csswg/css
 >3-ui/#text-overflow" title="http://dev.w3.org/csswg/css3-ui/#text
 >-overflow">CSS Basic User Interface Level 3</a>
110          </td>
111          <td>
112            {{ Spec2('CSS3 UI') }}
113          </td>
114          <td>
115            &nbsp;
116          </td>
117        </tr>
118      </tbody>
119    </table>
120    <h2>
n58    </h3>n122    </h2>
n144    <h3>n208    <h2>
145      Specifications
146    </h3>
147    <ul>
148      <li>
149        <a class="external" href="http://dev.w3.org/csswg/css3-ui
>/#text-overflow" title="http://dev.w3.org/csswg/css3-ui/#text-ove 
>rflow">CSS 3 Basic User Interface #text-overflow</a> &nbsp;Editor 
>'s draft, work in progress 
150      </li>
151      <li>Previously (OBSOLETE) <a class="external" href="http://
>www.w3.org/TR/2003/CR-css3-text-20030514/#text-overflow-props" ti 
>tle="http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-overfl 
>ow-props">CSS 3 Text Candidate Recommendation 2003-05-14</a> 
152      </li>
153    </ul>
154    <h3>
t156    </h3>t210    </h2>

Back to History