html - content - word break css3
¿Css word wrap que envuelve toda la palabra sin romperlos? (4)
Estaba jugando con esto. La gente no mencionó el ajuste del estilo de ruptura de palabras también. Las reglas predeterminadas de separación de palabras deben incluir la palabra al final del espacio del contenedor, pero no la mantiene intacta.
Entonces la solución a tu problema en CSS sería:
pre{
white-space: pre-wrap;
word-break: keep-all; /*this stops the word breaking*/
}
Edit: Me estaba metiendo con esto aún más y porque estoy usando bootstrap, su estilo parece desordenar mucho con la etiqueta pre. Utilice la palabra clave! Important para anular su estilo.
Necesito ajustar un texto largo a un ancho de unos 300 píxeles. Estoy usando este css :
div {
width: 300px;
color:white;
word-wrap:break-word;
}
Mi problema es con la word-wrap:break-word; . Está rompiendo palabras en medio de la palabra. Pero lo que necesito es que las palabras permanezcan como están, y que el documento sea lo suficientemente inteligente como para romper la línea cuando sea apropiado y que las palabras permanezcan intactas.
¿Es eso posible? Probé todas las opciones de ajuste de word-wrap pero nada funciona. O bien los párrafos no se rompen y el texto se queda fuera de la pantalla, o las palabras se rompen y un par de letras están en una línea, mientras que otras letras están en la línea siguiente.
EDITAR: agregar mi código para formar un ejemplo concreto. Todo mi elemento de style :
<style type="text/css">
p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular}
p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 10.0px OpenSansHebrew-Regular; min-height: 12.0px}
div {
width: 300px;
color:white;
font-size:10px;
word-wrap:break-word;
}
pre {white-space:break;}
</style>
Luego en el elemento body :
<body bgcolor="#1fa0e2">
<p class="p1">
<div>
<bdo dir="rtl">
<pre>
דירת 3 חדרים ברחוב ארתור רובינשטיין בתל אביב הוצעה באחרונה למכירה ב–2.5 מיליון שקל, ובסופו של דבר נמכרה ב–2.195 מיליון בלבד - פער של 12% בין המחיר המבוקש למחיר המכירה. בירושלים, דירת 4 חדרים ברחוב צביה יצחק הוצעה למכירה ב–1.6 מיליון שקל ונמכרה ב–40% פחות - 950 אלף שקל בלבד.
</pre>
</div>
</bdo>
<span class="Apple-converted-space"> </span></p>
</body>
</html>
No necesitas hacer nada especial. Normalmente el texto se romperá entre palabras.
Si eso no sucede, entonces
- o bien el contenedor es demasiado ancho
- el contenedor está configurado explícitamente para no dividirse en espacios en absoluto. Por ejemplo, si es un elemento
<pre>, o tiene elwhite-space:pre;csswhite-space:pre;owhite-space:nowrap;. - el texto contiene espacios que no se dividen (
) en lugar de espacios normales.
Solución: utilizar
white-space: pre-wrap;
Hará que el elemento se comporte como un elemento pre , excepto que también se ajusta cuando la línea es demasiado larga. Consulte también: http://css-tricks.com/almanac/properties/w/whitespace/
Puede envolver la palabra con una etiqueta <span> y agregar white-space: nowrap o display: inline-block .
Nota: asegúrese de que sus datos no se lean como ... word word word o navegadores que no sean Chrome piensan que es una palabra
Parece una locura, pero un error en la aplicación móvil de nuestra empresa fue hacer esto y hasta que revisé los datos de nuestra API, pensé que Internet se había roto: p