Aquí podría ser tu PUBLICIDAD


¿Cómo romper palabras en un guion?

votos
60

Dado un CSS relativamente simple:

div {
  width: 150px;
}
<div>
  12333-2333-233-23339392-332332323
</div>

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

Publicado el 04/08/2008 a las 01:17
fuente por usuario Karl Seguin
En otros idiomas...        العربية       

10 respuestas

votos
63

Reemplace sus guiones con esto:

&shy;

Se llama guión "suave".

div {
  width: 150px;
}
<div>
  12333&shy;2333&shy;233&shy;23339392&shy;332332323
</div>

Respondida el 04/08/2008 a las 01:25
fuente por usuario Ryan Fox


Aquí podría ser tu PUBLICIDAD


votos
31

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

Para citar a partir de ese enlace:

La Palabra rotura de Oportunidades ( <wbr>elemento HTML) representa una posición dentro de un texto en el que el navegador puede romper opcionalmente una línea, aunque sus reglas de división de líneas de otro modo no crear un salto en ese lugar.

Así es como se podría utilizar en el ejemplo de la OP (o verlo en acción en jsFiddle ):

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

* Lo he probado en IE9, IE10, y las últimas versiones de Chrome, Firefox y Opera, y Safari.

div {
  width: 150px;
}
<div>
  12333-<wbr>2333-<wbr>233-<wbr>23339392-<wbr>332332323
</div>

Respondida el 30/01/2012 a las 07:53
fuente por usuario aeskr

votos
17

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

Respondida el 04/08/2008 a las 01:25
fuente por usuario John Downey

votos
8

En esta instancia específica (donde la cadena va a contener 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>
Respondida el 05/12/2008 a las 01:36
fuente por usuario Peter LaComb Jr.

votos
8

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 &shy;, no funcionará para su ejemplo, ya que:

  • trabajo cuando se rompe la palabra, pero cuando no se rompe la palabra no se muestran guiones, o

  • trabaje cuando no se rompe la palabra, pero muestre dos guiones cuando se rompa la palabra, ya que agrega un guion en un salto.

Respondida el 16/09/2008 a las 12:15
fuente por usuario Dave Rutledge

votos
7

Dependiendo de lo que quiere ver exactamente, se puede utilizar una combinación de hyphen, soft hypheny / o zero width space.

En un guión de separación, su navegador puede palabra-break (adición de un guión). En un espacio de ancho cero, su navegador puede romper la palabra (sin añadir nada).

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

111111&shy;222222&shy;-333333&#8203;444444-&#8203;555555

a continuación, el navegador mostrará esto con ninguna palabra-break:

1111112222222-33333334444444-5555555

y esto lo hará cada posible palabra-break:

111111-
222222-
-333.333
444444-
555555

Sólo tiene que elegir la opción que necesita. En su caso, puede ser la que existe entre 4s y 5s.

Respondida el 16/09/2010 a las 10:04
fuente por usuario Orion

votos
1

También puedes usar :

word-break:break-all;

ex.

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

salida:

abababababa
ababababbba
abbabbababa
ababb

palabra-break es romper toda la palabra o línea incluso si no hay espacio en la frase que no pies de anchura o altura proporcionada. tuerca para que usted debe ser proporcionar una anchura o altura.

Respondida el 27/08/2015 a las 12:40
fuente por usuario Ajay Gupta

votos
0

Espero que esto puede ayudar

utilizar <br>la etiqueta (rotura) en la que desea romper la línea.

Respondida el 31/08/2017 a las 07:53
fuente por usuario Mohammed wahed khan

votos
0

En lugar de -que puede utilizar &hyphen;o \u2010.

También, asegúrese de que la guiones propiedad CSS fue no establece en ninguno (El valor predeterminado es el manual ).

<wbr>no es compatible con Internet Explorer .

Respondida el 14/05/2015 a las 04:29
fuente por usuario TObject

votos
0

El guión de no separación funciona bien.

HTML Entidad (decimal)

&#8209;
Respondida el 21/03/2014 a las 11:09
fuente por usuario Marcus Hoelscher


Aquí podría ser tu PUBLICIDAD