Necesito para adaptarse a un texto largo con un ancho de alrededor de 300 píxeles. Estoy usando este css:

 div {      
      width: 300px;
      color:white;
      word-wrap:break-word;
      }

Mi problema es con el word-wrap:break-word;. Es el corte de las palabras en el medio de la palabra. Pero lo que necesito es para que las palabras se queden como están, y para que el documento sea lo suficientemente inteligente como para romper la línea cuando corresponda, y de mantener las palabras en sí intacta.

Es eso posible? He intentado todas las opciones de word-wrap pero nada funciona. Cualquiera de los párrafos no están rompiendo y el texto se mantiene fuera de la pantalla, o las palabras de descanso y un par de letras que están en una línea, mientras que el resto de las letras son en la línea siguiente.

EDICIÓN: agregar mi código para formar un ejemplo concreto. Toda mi style elemento:

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

A continuación, en la body elemento:

<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>
  • Si usted se tipografía algo así como la poesía, se podría utilizar el <pre> elemento, pero por lo demás, creo que quiere que se busca en las white-space de la propiedad.
  • Información insuficiente. Comentarios, ahora decir que el contenido está dentro de pre, que es crucial. Por favor, edite la pregunta en sí misma para contener la información suficiente para reproducir el problema.
  • Hola @JukkaK.Korpela, he añadido el código que debe permitir hacer eso.
  • Todavía no está claro lo que quiere. El pre elemento significa texto preformateado. Por qué se emplea cuando no se quiere texto preformateado (es decir, el espaciado y los saltos de línea se muestra exactamente como en el código fuente HTML)? Normal p elemento sería adecuado para la visualización de un párrafo de texto. Texto vuelve a estar envuelta en un espacio en blanco.
  • estamos hablando acerca de los Términos de Servicio de una aplicación para IOS. Tiene cerca de 50 párrafos y no quiero formatear usando objective-c, ya que una tonelada de basura de trabajo. Necesito que se ajuste a un iPhone de pantalla de 320 píxeles. ¿Cuál es la mejor forma de hacerlo?
  • entonces usted debe describir el formato de los datos y de los requisitos de procesamiento. Suena como una pregunta diferente. Tal vez div con white-space: pre-wrap es la mejor opción si usted no desea convertir los datos en bien de marcado HTML, pero esto depende de los requisitos exactos. Y si ahora tienen líneas en blanco que indica lógicos límites de párrafo, como sospecho, que debería ser bastante sencillo para convertir a la <p> etiquetas. Esto podría ser todo lo que usted necesita (además de dir=rtl en un elemento que encierra).
  • pre {white-space: pre-wrap;} hizo. Gracias @JukkaK.Korpela. Si se escribe como una respuesta estaré encantado de aceptarlo.

InformationsquelleAutor Eddy | 2014-05-01

4 Comentarios

  1. 32

    Usted no necesita hacer nada especial. Normalmente, el texto de ruptura entre las palabras.

    Si eso no sucede, entonces

    1. el contenedor es demasiado amplia
    2. el contenedor se establece explícitamente para no romper en los espacios en absoluto. Por ejemplo, si es un <pre> elemento, o tiene el css white-space:pre; o white-space:nowrap;.
    3. el texto contiene espacios de no separación (&nbsp;) en lugar de la normal de espacios.

    Solución: utilizar

    white-space: pre-wrap;

    Hará que el elemento se comporte como un pre elemento, excepto que también se ajusta cuando la línea es demasiado larga. Vea también:
    http://css-tricks.com/almanac/properties/w/whitespace/

    • Gracias @GolezTrol. Mi texto es, de hecho, en un ‘<pre>’ elemento. ¿Hay una solución? Yo más o menos tiene que tener dentro de ‘<pre>’ porque es muy largo y lleno de formato.
    • Sí, usted puede utilizar white-space: pre-wrap. (respuesta actualizada)
    • He añadido pero aún así romper las palabras.
    • Se debe añadir que a la pre elemento, no a la div. Por cierto, es de ayuda si usted incluir un mínimo de ejemplo en la pregunta y/o en un jsiddle. De esa manera es más fácil identificar el problema exacto y a mostrar la solución. Ahora, sólo estoy adivinando lo que has hecho mal. 🙂
    • Gracias @GolezTrol. He editado la pregunta y se añade un ejemplo mínimo. Gracias por tu ayuda.
    • para mí, este fue el tema (&nbsp;)
    • el #1 me ayudó; necesitaba width: 100% (para ajustar el ancho para algo así que la parte sabe que, cuando el texto se desborda)

  2. 28

    Yo se preocupe por esto. La gente no mencionar la configuración de la palabra de salto de estilo también. El valor predeterminado de palabra-romper las reglas deben envolver la palabra al final de el espacio del contenedor, pero no mantener la palabra intacta.

    Por lo que la solución a su problema en el CSS sería:

    pre{
        white-space: pre-wrap;
        word-break: keep-all; /*this stops the word breaking*/
    }

    Editar:
    Yo estaba jugando con esto y debido a que estoy usando bootstrap, su estilo se parece al lío con la pre etiqueta de mucho. El uso de el !palabra clave importante para anular su estilo.

    • Mantener todos fue el de línea adicionales necesarios para mantener las palabras en su conjunto. +1
    • Esto debe ser aceptado respuesta!
  3. 2

    Se puede envolver la palabra con un <span> etiqueta y agregar white-space: nowrap o display: inline-block.

    • white-space:pre-wrap + palabra-break:keep-todos no funciona con span + display:block, pero con inline-block es aceptar. Gracias por la sugerencia!
  4. 1

    Nota:: asegúrese de que los datos no se leen como..
    word&nbsp;word&nbsp;word o de otros navegadores chrome creo que es una palabra

    Parece una locura, pero un error en nuestra empresa de aplicaciones móviles estaba haciendo esto y hasta me registré nuestros datos de la API pensé que el internet se había roto :p

Dejar respuesta

Please enter your comment!
Please enter your name here