css-cadena-textoTutoriales CSS

Cómo evitar que una cadena de texto sobresalga del contenedor – CSS

El texto dentro de un contenedor, comúnmente es cortado automáticamente para ajustarse al ancho dicho contenedor…sin embargo, está el caso de las cadenas irrompibles, aquellas que son demasiado largas y de una u otra forma sobresalen del contenedor.

Ejemplo de cadena irrompible

Sintaxis:

<div id="contenedor">
texto&textotexto&sadasda&textotextotextotexto&texto&textotexto=texto&texto=texto&texto=texto
</div>
<style>
#contenedor {width: 360px;background: #bfbfbf;color: #000;}
</style>

Resultado:

cadena-irrompible

Evitar que sobresalga utilizando word-wrap: break-word;

Como se habrán dado cuenta, la cadena de texto es demasiado larga, por lo que sobresale del contenedor. La solución es utilizar la propiedad css word-wrap: break-word; la cual forza el salto de linea, evitando así que la cadena sobresalga del contenedor. De igual manera se puede utilizar en su lugar la propiedad overflow-wrap: break-word; ya que ambos tienen la misma función, como un nombre alternativo para la propiedad, como si se tratara de una abreviatura.

Evitar que sobresalga utilizando overflow: auto;

Otra manera, además de cortar la cadena, sería utilizando la propiedad overflow: auto; la cual en lugar de forzar el salto de linea, creará una caja con scroll, deslizable.

Sintaxis:

<div id="contenedor">
texto&textotexto&sadasda&textotextotextotexto&texto&textotexto=texto&texto=texto&texto=texto
</div>
<style>
#contenedor {overflow: auto;width: 200px;background: #bfbfbf;color: #000;}
</style>

Resultado