¿Cómo dividir palabras en un guión?

Question

Dado un CSS relativamente simple:

div {
  width: 150px;
}

<div>
  12333-2333-233-23339392-332332323
</div>

¿Cómo hago para que la cadena permanezca restringida al width de 150, y simplemente se ajusta a una nueva línea en el guión?

Answer 1

Reemplace sus guiones con esto:

­

Se llama guión "suave".

div {
  width: 150px;
}

<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Answer 2

En todos los navegadores modernos^* (y en algunos navegadores antiguos, también), el <wbr> elemento es la herramienta perfecta para brindar la oportunidad de dividir palabras largas en puntos específicos.

Para citar de ese enlace:

La oportunidad de romper la palabra (<wbr>) El elemento HTML representa una posición dentro del texto donde el navegador puede opcionalmente romper una línea, aunque sus reglas de salto de línea no crearían un salto en esa ubicación.

Así es como podría usarse en el ejemplo del OP (o verlo en acción en JSFiddle):

<div style="width: 150px;">
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

^*Lo probé en IE9, IE10 y las últimas versiones de Chrome, Firefox, Opera y Safari.

div {
  width: 150px;
}

<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Answer 3

Como parte de CSS3, aún no es totalmente compatible, pero puedes encontrar información sobre el ajuste de palabras aquí.Otra opción es la etiqueta wbr, y ninguno de los cuales es totalmente compatible tampoco.

Answer 4

Su ejemplo funciona como se esperaba en Google Chrome, Safari (Windows) e IE8.El texto sale del cuadro de 150 píxeles en Firefox 3 y Opera 9.5.

Además ­ no funcionará para su ejemplo, ya que:

• funciona cuando se dividen palabras, pero cuando no se dividen palabras, no muestra ningún guión, o

• Trabaje cuando no se agote por las palabras, pero muestre dos guiones cuando rompa palabras ya que agrega un guión en un descanso.

Answer 5

En este caso específico (donde su cadena contendrá guiones), transformaría el texto a este lado del servidor:

<div style="width:150px;">
  <span>12333-</span><span>2333-</span><span>233-</span><span>23339392-</span><span>332332323</span>
</div>

Answer 6

Dependiendo de lo que quieras ver exactamente, puedes usar una combinación de hyphen, soft hyphen, y/o zero width space.

En un guión suave, su navegador puede dividir palabras (agregando un guión).En un espacio de ancho cero, su navegador puede dividir palabras (sin agregar nada).

Por lo tanto, si su código es algo como :

111111­222222­-333333​444444-​555555

entonces tu navegador mostrará esto sin saltos de palabra:

1111112222222-33333334444444-5555555

y esto será cada posible salto de palabra:

111111-
222222-
-333333
444444-
555555

Simplemente elija la opción que necesita.En tu caso puede ser el que esté entre 4s y 5s.

Answer 7

También puedes usar :

word-break:break-all;

ex.

<div style='width:10px'>ababababababbabaabababababababbabababa</div>

producción:

abababababa
ababababbba
abbabbababa
ababb

salto de palabra es romper toda la palabra o línea, incluso si no hay espacios en la oración que no se ajusten al ancho o alto proporcionado.tuerca para eso debes proporcionar un ancho o alto.

Answer 8

El guión continuo funciona bien.

Entidad HTML (decimal)

‑

Answer 9

En lugar de - puedes usar ‐ o \u2010.

Además, asegúrese de que guiones propiedad CSS era no ajustado a ninguno (El valor predeterminado es manual).

<wbr> no es apoyado por explorador de Internet.

Answer 10

Espero que esto pueda ayudar

usar <br>(romper) etiqueta donde deseas romper la línea.

Answer 11

Puede utilizar un espacio de 0 ancho después del carácter de guión:

div {
  width: 150px;
}

<div>
  12333-&#8203;2333-&#8203;233-&#8203;23339392-&#8203;332332323
</div>

si desea un salto de línea antes del uso del guión ​- en cambio.