tabla - ¿Cómo ajustar el texto de la palabra en HTML?

word wrap traduccion

Question

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

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

Answer 1

Agrega 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"

Answer 2

Ejemplo de trucos de 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 here .

Answer 3

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é esto a prueba de balas.

Answer 4

En HTML cuerpo, 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 body try:

background-size: auto;
table-layout: fixed;

Answer 5

En el 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;
}

Answer 6

Esto funcionó para mí

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;

Answer 7

Otra opción también está usando:

div
{
white-space: pre-line;
}

Esto configurará todos sus elementos div en todos los navegadores compatibles con CSS1 (que es prácticamente todos los navegadores más comunes desde IE 8)

Answer 8

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;
}

el desbordamiento de texto de la propiedad: elipsis agregar ... y salto de línea muestran el número de líneas.

Answer 9

Prueba esto:

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

Answer 10

Puede usar un guion suave como ese:

aaaaaaaaaaaaaaa­aaaaaaaaaaaaaaa

Esto aparecerá como

aaaaaaaaaaaaaaa-
aaaaaaaaaaaaaaa

si el cuadro contenedor no es lo suficientemente grande, o como

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

si esto es.

Answer 11

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

Answer 12

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

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

Answer 13

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+ */
}

Answer 14

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

La solución '' word-wrap '' solo funciona en IE y navegadores compatibles con CSS3 .

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

p.ej

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa​aaaaaaaaaaaaaaaaaaaaaaaaaaaaa