path: root/files/es/web/css/text-overflow/index.html

---
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( &lt;length> | &lt;percentage> )">fade()</a></code>, que recibe {{cssxref("&lt;length&gt;")}} o {{cssxref("&lt;percentage&gt;")}} para controlar la distancia de desvanecimiento</li>
 <li>Un <code><a href="#&lt;string>">&lt;string&gt;</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="&lt;string>" name="&lt;string>"><code>&lt;string&gt;</code></a> {{experimental_inline}}</dt>
 <dd>The {{cssxref("&lt;string&gt;")}} 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( &lt;length> | &lt;percentage> )" name="fade( &lt;length> | &lt;percentage> )"><code>fade( &lt;length&gt; | &lt;percentage&gt; )</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("&lt;percentage&gt;")}} 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>

<pre class="syntaxbox notranslate">{{csssyntax}}
</pre>

<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">&lt;p class="overflow-visible"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
&lt;p class="overflow-clip"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
&lt;p class="overflow-ellipsis"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
&lt;p class="overflow-string"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.&lt;/p&gt;
</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>&lt;string&gt;</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>