---
title: text-overflow
slug: Web/CSS/text-overflow
translation_of: Web/CSS/text-overflow
---
<div>{{CSSRef}}</div>
<p>La propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>text-overflow</code></strong> determina como el contenido que se desborda y que no es mostrado, va a hacérsele notar a los usuarios. Puede ser cortado, mostrar una elipsis ('<code>…</code>', <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>), o mostrar una cadena de texto personalizada.</p>
<div>{{EmbedInteractiveExample("pages/css/text-overflow.html")}}</div>
<p>La propiedad <code>text-overflow</code> no fuerza a que ocurra un desbordamiento. Para hacer que un texto desborde a su contenedor debes poner algunas otras propiedades de CSS. Por ejemplo:</p>
<pre class="brush: css no-line-numbers notranslate">overflow: hidden;
white-space: nowrap;</pre>
<p>La propiedad <code>text-overflow</code> solo afecta al contenido que está rebasando un elemento de contenedor en bloque en su dirección de progresión <em>inline</em> (no así, a un texto que rebase por el <em>bottom </em>del contenedor, por).</p>
<h2 id="Sintaxis">Sintaxis</h2>
<p>La propiedad <code>text-overflow</code> ha de ser especificada usando uno o dos valores. Si se define solo un valor, este determinará el comportamiento del <em>overflow </em>para el final de la línea (el extremo derecho en un texto izquierda-a-derecha o el extremo izquierdo en un texto derecha-a-izquierda). Si se definen dos valores, el primero hará referencia al comportamiento <em>overflow</em> para para el extremo izquierdo y el segundo al extremo derecho de la línea.</p>
<p>Cada valor se especificará como una de las siguientes opciones:</p>
<ul>
<li>Una palabra clave: <code><a href="#clip">clip</a></code>, <code><a href="#ellipsis">ellipsis</a></code>, <code><a href="#fade">fade</a></code></li>
<li>La función <code><a href="#fade( <length> | <percentage> )">fade()</a></code>, que recibe {{cssxref("<length>")}} o {{cssxref("<percentage>")}} para controlar la distancia de desvanecimiento</li>
<li>Un <code><a href="#<string>"><string></a></code>.</li>
</ul>
<h3 id="Values">Values</h3>
<dl>
<dt><a id="clip" name="clip"><code>clip</code></a></dt>
<dd>The default for this property. This keyword value will truncate the text at the limit of the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, therefore the truncation can happen in the middle of a character. To clip at the transition between characters you can specify <code>text-overflow</code> as an empty string, if that is supported in your target browsers: <code>text-overflow: '';</code>.</dd>
<dt><a id="ellipsis" name="ellipsis"><code>ellipsis</code></a></dt>
<dd>This keyword value will display an ellipsis (<code>'…'</code>, <code style="text-transform: uppercase;">U+2026 Horizontal Ellipsis</code>) to represent clipped text. The ellipsis is displayed inside the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, decreasing the amount of text displayed. If there is not enough space to display the ellipsis, it is clipped.</dd>
<dt><a id="<string>" name="<string>"><code><string></code></a> {{experimental_inline}}</dt>
<dd>The {{cssxref("<string>")}} to be used to represent clipped text. The string is displayed inside the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">content area</a>, shortening the size of the displayed text. If there is not enough space to display the string itself, it is clipped.</dd>
<dt><a id="fade" name="fade"><code>fade</code></a> {{experimental_inline}}</dt>
<dd>This keyword clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.</dd>
<dt><a id="fade( <length> | <percentage> )" name="fade( <length> | <percentage> )"><code>fade( <length> | <percentage> )</code></a> {{experimental_inline}}</dt>
<dd>This function clips the overflowing inline content and applies a fade-out effect near the edge of the line box with complete transparency at the edge.</dd>
<dd>The argument determines the distance over which the fade effect is applied. The {{cssxref("<percentage>")}} is resolved against the width of the line box. Values lower than <code>0</code> are clipped to <code>0</code>. Values greater than the width of the line box are clipped to the width of the line box.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css notranslate">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: " [..]";
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html notranslate"><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>
</pre>
<h3 id="Result">Result</h3>
<p>{{EmbedLiveSample('Examples', 300, 220, '', 'Web/CSS/text-overflow')}}</p>
<table class="standard-table">
<thead>
<tr>
<th colspan="1" rowspan="2" scope="col" style="width: 15em;">CSS value</th>
<th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: ltr</code></th>
<th colspan="2" rowspan="1" scope="col" style="text-align: center;"><code>direction: rtl</code></th>
</tr>
<tr>
<th scope="col">Expected Result</th>
<th scope="col">Live result</th>
<th scope="col">Expected Result</th>
<th scope="col">Live result</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>visible overflow</em></td>
<td style="font-family: monospace;">1234567890</td>
<td style="direction: ltr;">
<div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">0987654321</td>
<td>
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: visible;"><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: clip</code></td>
<td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip.png" class="default internal" src="/@api/deki/files/6056/=t-o_clip.png"></td>
<td style="direction: ltr;">
<div style="float: left; font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;">123456</div>
</td>
<td style="padding: 1px; font-family: monospace;"><img alt="t-o_clip_rtl.png" class="default internal" src="/@api/deki/files/6057/=t-o_clip_rtl.png"></td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip;"><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ''</code></td>
<td style="font-family: monospace;">12345</td>
<td style="direction: ltr;">
<div style="">123456</div>
</td>
<td style="font-family: monospace;">54321</td>
<td style="direction: rtl;">
<div style=""><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ellipsis</code></td>
<td style="font-family: monospace;">1234…</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">…4321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis;"><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: '.'</code></td>
<td style="font-family: monospace;">1234.</td>
<td style="direction: ltr;">
<div style=""><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">.4321</td>
<td style="direction: rtl;">
<div style=""><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: clip clip</code></td>
<td style="font-family: monospace;">123456</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">654321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip clip;"><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: clip ellipsis</code></td>
<td style="font-family: monospace;">1234…</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">6543…</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: clip ellipsis;"><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: clip '.'</code></td>
<td style="font-family: monospace;">1234.</td>
<td style="direction: ltr;">
<div style=""><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">6543.</td>
<td style="direction: rtl;">
<div style=""><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ellipsis clip</code></td>
<td style="font-family: monospace;">…3456</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">…4321</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis clip;"><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ellipsis ellipsis</code></td>
<td style="font-family: monospace;">…34…</td>
<td style="direction: ltr;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">…43…</td>
<td style="direction: rtl;">
<div style="font-family: monospace; white-space: nowrap; max-width: 3.35em; overflow: hidden; text-overflow: ellipsis ellipsis;"><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ellipsis '.'</code></td>
<td style="font-family: monospace;">…34.</td>
<td style="direction: ltr;">
<div style=""><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">…43.</td>
<td style="direction: rtl;">
<div style=""><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ',' clip</code></td>
<td style="font-family: monospace;">,3456</td>
<td style="direction: ltr;">
<div style=""><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">,4321</td>
<td style="direction: rtl;">
<div style=""><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ',' ellipsis</code></td>
<td style="font-family: monospace;">,34…</td>
<td style="direction: ltr;">
<div style=""><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">,43…</td>
<td style="direction: rtl;">
<div style=""><span style="">1234567890</span></div>
</td>
</tr>
<tr>
<td><code>text-overflow: ',' '.'</code></td>
<td style="font-family: monospace;">,34.</td>
<td style="direction: ltr;">
<div style=""><span style="">1234567890</span></div>
</td>
<td style="font-family: monospace;">,53.</td>
<td style="direction: rtl;">
<div style=""><span style="">1234567890</span></div>
</td>
</tr>
</tbody>
</table>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 UI', '#text-overflow', 'text-overflow')}}</td>
<td>{{Spec2('CSS4 UI')}}</td>
<td>Added the values <code><string></code> and <code>fade</code> and the <code>fade()</code> function</td>
</tr>
<tr>
<td>{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}</td>
<td>{{Spec2('CSS3 UI')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<p>A previous version of this interface reached the <em>Candidate Recommendation</em> status. As some not-listed-at-risk features needed to be removed, the spec was demoted to the <em>Working Draft</em> level, explaining why browsers implemented this property unprefixed, though not at the CR state.</p>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.text-overflow")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li>Related CSS properties: {{cssxref("overflow")}}, {{cssxref("white-space")}}</li>
<li>CSS properties that control line breaks in words: {{cssxref("overflow-wrap")}}, {{cssxref("word-break")}}</li>
</ul>