lista - meta tags html
¿Cómo romper palabras en un guión? (11)
Como parte de CSS3, todavía no es totalmente compatible, pero puede encontrar información sobre el ajuste de texto aquí . Otra opción es la etiqueta wbr, & shy ;, y & # 8203; ninguno de los cuales es totalmente compatible tampoco.
Dado un CSS relativamente simple:
div {
width: 150px;
}
<div>
12333-2333-233-23339392-332332323
</div>
¿Cómo hago para que la cadena permanezca limitada al
width
de
150
y simplemente se ajuste a una nueva línea en el guión?
Dependiendo de lo que quiera ver exactamente, puede 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 su navegador mostrará esto sin saltos de palabras:
1111112222222-33333334444444-5555555
y esto hará cada salto de palabra posible:
111111-
222222-
-333333
444444-
555555
Simplemente elija la opción que necesita. En su caso, puede ser uno entre 4s y 5s.
El guión que no se rompe funciona bien.
Entidad HTML (decimal)
‑
En esta instancia específica (donde su 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>
En lugar de
-
puedes usar
‐
o
/u2010
.
Además, asegúrese de que la propiedad css de guiones no esté establecida en none (el valor predeterminado es manual ).
<wbr>
no es compatible con
Internet Explorer
.
En todos los navegadores modernos
*
(y también en algunos
navegadores antiguos
), el
elemento
<wbr>
es la herramienta perfecta para proporcionar la oportunidad de romper palabras largas en puntos específicos.
Para citar desde ese enlace:
El elemento HTML Oportunidad de salto de palabra (
<wbr>) representa una posición dentro del texto donde el navegador opcionalmente puede 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>
Espero que esto pueda ayudar
use la etiqueta
<br>
(salto) donde quiera romper la línea.
Puede usar 0 ancho de espacio después del guión:
div {
width: 150px;
}
<div>
12333-​2333-​233-​23339392-​332332323
</div>
si desea un salto de línea antes del guión, use
​-
lugar.
Reemplace sus guiones con esto:
­
Se llama un guión "suave".
div {
width: 150px;
}
<div>
12333­2333­233­23339392­332332323
</div>
Su ejemplo funciona como se esperaba en Google Chrome, Safari (Windows) e IE8. El texto sale del cuadro de 150 px en Firefox 3 y Opera 9.5.
Además
­
no funcionará para su ejemplo, ya que tampoco:
-
funciona cuando se rompen las palabras pero cuando no se rompen las palabras no se muestran guiones, o
-
funciona cuando no se separa la palabra, pero muestra dos guiones cuando se separa la palabra, ya que agrega un guión en un salto.
También puedes usar :
word-break:break-all;
ex.
<div style=''width:10px''>ababababababbabaabababababababbabababa</div>
salida:
abababababa
ababababbba
abbabbababa
ababb
el salto de palabra es romper toda la palabra o línea, incluso si no hay espacio en la oración que no se ajuste al ancho o alto provisto. tuerca para eso se debe proporcionar un ancho o alto.