Envolviendo largas direcciones de correo electrónico en cajas pequeñas

Tengo una caja con un ancho de 118px que contiene una dirección de correo electrónico. Uso word-wrap: break-word; para envolver las direcciones mejor. Pero en un tipo especial de direcciones, esto lo empeora.

 big.ass.email@addre ss- is.extremely.lame.de 

Debido a la redacción de word-wrap: break-word; se rompe después de “addre” pero debido a que el rest de la dirección no cabe en una línea, se rompe nuevamente en un “punto de corte preferido” que resulta ser el “-“. En el comportamiento deseado, el segundo corte en la dirección de correo electrónico no sería después de “-” sino después de “extremadamente”. Me temo que eso no es posible solo con CSS. ¿No es así?

Aquí puedes ver un pequeño ejemplo: http://jsfiddle.net/sbg8G/2/

Su mejor opción aquí sería usar la etiqueta o personaje para introducir un descanso suave donde lo desee. p.ej:

Demostración: http://jsfiddle.net/abhitalks/sbg8G/15/

HTML:

 ...  big.ass.email@​address-is​.extremely.lame.de  ... 

Aquí, se inserta después de “@” y después de “-is” para causar un corte en esos puntos.

Importante : word-wrap word-break no lo ayudarán aquí.

Motivo :

  1. word-break para textos CJK (chino, japonés, coreano). (Referencia) . Su objective principal es evitar saltos de palabra para el texto CJK. El descanso es normal.
  2. word-wrap se utiliza para especificar si el navegador puede o no romper líneas dentro de palabras para evitar el desbordamiento. Eso es. (Referencia) Lo principal a notar es que “… las palabras normalmente irrompibles pueden romperse en puntos arbitrarios …” . Los puntos arbitrarios no te dan mucho control, ¿verdad?

Los hard-hyphens ayudan a indicar los puntos de quiebre. Tiene un guión en su dirección de correo electrónico y eso da una pista para romper la palabra allí.


Nota :

Una mejor alternativa sería que CSS3 lo haga por nosotros. word-wrap word-break no permiten el control de los puntos de ruptura. hyphens , pero, por desgracia, los hyphens todavía ” es una tecnología experimental “.

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

hyphens deben ser capaces de hacer el truco junto con:

 hyphenate-limit-lines hyphenate-limit-zone hyphenate-character hyphenate-limit-before 

Pero, esto no funciona actualmente como debería. De lo contrario, a ­ te habría ayudado.

Nota 2 :

hyphens , agregaría un “guión fuerte” (-) que causaría resultados no deseados en su caso (la dirección de correo electrónico cambiaría).

Créditos : aquí , aquí y aquí

Puede intentar usar el desbordamiento de texto: puntos suspensivos;

 overflow:hidden; text-overflow:ellipsis; 

http://jsfiddle.net/sbg8G/8/

Intereting Posts