¿Cómo redactar texto en HTML?

¿Cómo se puede ajustar un texto como el aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaque excede el ancho de un div(digamos 200px)?

Estoy abierto a cualquier tipo de solución como CSS, jQuery, etc.

Prueba esto:

div {
    width: 200px;
    word-wrap: break-word;
}

En bootstrap 3, asegúrese de que el espacio en blanco no esté configurado como 'nowrap'.

div {
  width: 200px;
  word-break: break-all;
  white-space: normal;
}

Puede usar un guión suave como este:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Esto aparecerá como

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

si el cuadro que contiene no es lo suficientemente grande, o como

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

si esto es.

   div {
    // set a width
    word-wrap: break-word
}

La word-wrapsolución ' ' solo funciona en IE y navegadores compatibles CSS3.

La mejor solución de navegador cruzado es utilizar el lenguaje del lado del servidor (php o lo que sea) para ubicar cadenas largas y colocar dentro de ellas a intervalos regulares la entidad html ​ Esta entidad rompe las palabras largas muy bien y funciona en todos los navegadores.

p.ej

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa

El único que funciona en IE, Firefox, Chrome, Safari y Opera si no hay espacios en la palabra (como una URL larga) es:

div{
    width: 200px;  
    word-break: break-all;
}

Encontré que esto es a prueba de balas.

Esto funciono para mi

word-wrap: normal;
word-break: break-all;
white-space: normal;
display: block;
height: auto;
margin: 3px auto;
line-height: 1.4;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;

Otra opción también está usando:

div
{
   white-space: pre-line;
}

Esto establecerá todos sus elementos div en todos los navegadores que admitan CSS1 (que es prácticamente todos los navegadores comunes desde IE 8)

Navegador cruzado

.wrap
{
    white-space: pre-wrap; /* css-3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

Agregue este CSS al párrafo.

style="width:420px; 
min-height:15px; 
height:auto!important; 
color:#666; padding: 1%; 
font-size: 14px; 
font-weight: normal;
word-wrap: break-word; 
text-align: left" 

Ejemplo de trucos CSS :

div {
    -ms-word-break: break-all;

    /* Be VERY careful with this, breaks normal words wh_erever */
    word-break: break-all;

    /* Non standard for webkit */
    word-break: break-word;

    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

Más ejemplos aquí .

Una solución del lado del servidor que funciona para mí es: ¿ $message = wordwrap($message, 50, "<br>", true);dónde $messageestá una variable de cadena que contiene la palabra / caracteres a dividir? 50 es la longitud máxima de cualquier segmento dado, y "<br>"es el texto que desea insertar cada (50) caracteres.

Prueba esto

div{
  display: block;
  display: -webkit-box;
  height: 20px;
  margin: 3px auto;
  font-size: 14px;
  line-height: 1.4;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

la propiedad text-overflow: elipsis add ... y line-clamp muestran el número de líneas.

En HTML body intente:

<table>
    <tr>
        <td>
            <div style="word-wrap: break-word; width: 800px">
                Hello world, how are you? More text here to see if it wraps after a long while of writing and it does on Firefox but I have not tested it on Chrome yet. It also works wonders if you have a medium to long paragraph. Just avoid writing in the CSS file that the words have to break-all, that's a small tip.
            </div>
        </td>
    </tr>
</table>

En CSS cuerpo intente:

background-size: auto;

table-layout: fixed;

Prueba esto

div {display: inline;}

He usado bootstrap. Mi código html se parece a ...

<div class="container mt-3" style="width: 100%;">
  <div class="row">
    <div class="col-sm-12 wrap-text">
      <h6>
        text content
      </h6>
    </div>
  </div>
</div>

CSS

.wrap-text {
     text-align:justify;
}

puedes usar este CSS

p {
  width: min-content;
  min-width: 100%;
}

tratar:

overflow-wrap: break-word;

Utilice el word-wrap:break-wordatributo junto con el ancho requerido. Principalmente, ponga el ancho en píxeles, no en porcentajes.

width: 200px;
word-wrap: break-word;