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:
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>
