ejemplos - title html css
En HTML, ¿es posible insertar una sugerencia de ajuste de palabras? (4)
Los elementos <wbr> y A menudo funciona, pero no siempre. Son especialmente problemáticos al diseñar una página de destino estática que (a) tiene que funcionar en una variedad de pantallas y navegadores y (b) tiene que verse bien.
En este caso, quiero controlar las sugerencias de salto de línea en una variedad de resoluciones de pantalla diferentes. Para ello, utilizo las etiquetas <br> y css. Puede volverse un desastre si se vuelve complejo, pero encontré que funciona hasta cierto punto. Por ejemplo:
<p class=''break-hints''>
Hello there, dear customer. <br class=''break-big''>
Please have a look <br class=''break-small''> at our offer.
</p>
Luego uso CSS con consultas de medios para indicar cuándo deben activarse los distintos saltos.
p.break-hints br {
display: none;
}
@media only screen and (max-width: 300px) {
p.break-hints br.break-small {
display: inline;
}
}
p.break-hints br.break-big {
display: inline;
}
Imagina que tengo una larga línea de texto de varias palabras en un DIV:
Hola, querido cliente. Por favor, eche un vistazo a nuestra oferta.
El DIV tiene un ancho dinámico. Quiero envolver el texto anterior. Actualmente, el ajuste se realiza en un límite de palabra que maximiza la longitud de la primera línea:
|-DIV WIDTH------------------------------------|
Hello there, dear customer. Please have a look
at our offer.
Preferiría que la envoltura suceda en el límite de la oración. Sin embargo, si no es necesario envolver, me gustaría que la línea permanezca como una.
Para ilustrar mi punto, mire los distintos anchos de DIV y cómo me gustaría que se ajuste mi texto:
|-DIV WIDTH--------------------------------------------------------|
Hello there, dear customer. Please have a look at our offer.
|-DIV WIDTH-----------------------------------|
Hello there, dear customer.
Please have a look at our offer.
|-DIV WIDTH--------|
Hello there, dear
customer.
Please have a look
at our offer.
Con las palabras, puede usar un guión suave para que el ajuste de la palabra ocurra en los límites de sílabas sugeridas. Si no se necesita envoltura, el ­ permanece invisible. Si se necesita envolver, el ­ es donde sucede:
magnifi­cently
¿Existe un método análogo para insinuar el ajuste de palabras en HTML?
No exactamente, pero cerca: http://jsfiddle.net/uW4h8/1/ .
En resumen, debe configurar white-space: nowrap; para su contenedor de texto y use <wbr> para insertar saltos entre palabras como desee.
Use un espacio de no interrupción U + 00A0 (o si no tiene una manera conveniente de ingresar el carácter como tal) entre palabras cuando no se permita un salto de línea, y el espacio normal de lo contrario.
Esto no funcionará cuando las palabras contengan guiones "-", y algunos otros caracteres, como los paréntesis, también pueden causar problemas, ya que algunos navegadores los consideran como que permiten un salto de línea después de ellos. Consulte http://www.cs.tut.fi/~jkorpela/html/nobr.html para un extenso tratado, que incluye varias técnicas para enfrentar los problemas. Pero si tiene palabras normales con puntuación normal solamente y sin guiones, debería estar bien con el enfoque simple.
Uso ­ en palabras o <wbr> entre palabras, ya que <wbr> no introducirá un guión.
Ver también: