Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Compare Revisions

text-overflow

Change Revisions

Revision 349305:

Revision 349305 by ethertank on

Revision 357417:

Revision 357417 by teoli on

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

Revision 349305
Revision 357417
n27        <dfn>{{ xref_cssinitial() }}</dfn> <code>clip</code>n27        <dfn>{{ xref_cssinitial() }}</dfn> {{cssinitial("text-ove
 >rflow")}}
n45    <pre class="syntaxbox">n45    <pre class="twopartsyntaxbox">
46text-overflow: inherit                                 <em>or</em46<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Valu
>>>e_definition_syntax">Formal syntax</a>: {{csssyntax("text-overflo
 >w")}}
47text-overflow: <em>end-overflow-type              </em><code>    
>     <em>or</em></code> 
48<em><code>text-overflow: </code></em><code><em>left-overflow-type
><code> </code>right-overflow-type</em></code>      /* This syntax 
> is still experimental and may be pushed to CSS4 */ 
n50    <p>n48    <pre>
51      where :49/* One-value syntax: the value describe the overflow performed at
 > the end of the line (right end if ltr, left end if rtl) */
50text-overflow: clip
51text-overflow: ellipsis
52text-overflow: "…"
53 
54/* Two-value syntax: the first value describes the overflow at th
 >e left end of the line, 
55                     the second at the right end. Directionality 
 >has no influence */
56 
57text-overflow: clip ellipsis
58text-overflow: "…" "…"
59 
60text-overflow: inherit
61</pre>
62    <h3>
63      Values
52    </p>64    </h3>
n54      <dt style="margin-left: 40px;">n
55        <code>inherit</code>
56      </dt>66      <dt>
57      <dd style="margin-left: 80px;">
58        Is a keyword indicating to use the value of this CSS prop
>erty that the parent element of the element uses. 
59      </dd>
60      <dt style="margin-left: 40px;">
61        <em>end-overflow-type</em>
62      </dt>
63      <dd style="margin-left: 80px;">
64        Is an <a href="/en/CSS/text-overflow#.3Coverflow-type.3E"
> title="en/CSS/text-overflow#.3Coverflow-type.3E"><code>&lt;overf 
>low-type&gt;</code></a> CSS value describing the overflow to perf 
>orm at the end of the line. The end of the line is its <em>right< 
>/em> end if the text is written with <em>left-to-right</em> direc 
>tionality, it is its <em>left</em> end if the text is written wit 
>h <em>right-to-left</em> directionality. 
65      </dd>
66      <dt style="margin-left: 40px;">
67        <em>left-overflow-type</em>
68      </dt>
69      <dd style="margin-left: 80px;">
70        Is an <a href="/en/CSS/text-overflow#.3Coverflow-type.3E"
> title="en/CSS/text-overflow#.3Coverflow-type.3E"><code>&lt;overf 
>low-type&gt;</code></a> CSS value describing the overflow to perf 
>orm at the <em>left</em> end of the line. The directionality of t 
>he text has no influence on which end of the line is affected. 
71      </dd>
72      <dt style="margin-left: 40px;">
73        <em>right-overflow-type</em>
74      </dt>
75      <dd style="margin-left: 80px;">
76        Is an <a href="/en/CSS/text-overflow#.3Coverflow-type.3E"
> title="en/CSS/text-overflow#.3Coverflow-type.3E"><code>&lt;overf 
>low-type&gt;</code></a> CSS value describing the overflow to perf 
>orm at the <em>right</em> end of the line. The directionality of  
>the text has no influence on which end of the line is affected. 
77      </dd>
78    </dl>
79    <h3 id="&lt;overflow-type&gt;">
80      <code>&lt;overflow-type&gt;</code>
81    </h3>
82    <p>
83      The <code>&lt;overflow-type&gt;</code> CSS type describes h
>ow text overflow, when not visible, must be handled. The followin 
>g values are valid: 
84    </p>
85    <dl>
86      <dt style="margin-left: 40px;">
n89      <dd style="margin-left: 80px;">n69      <dd>
n92      <dt style="margin-left: 40px;">n72      <dt>
n95      <dd style="margin-left: 80px;">n75      <dd>
n98      <dt style="margin-left: 40px;">n78      <dt>
99        <em>string {{ experimental_inline() }}</em>79        <code>&lt;string&gt;</code> {{ experimental_inline() }}
t101      <dd style="margin-left: 80px;">t81      <dd>

Back to History