2011-02-18 18 views
7

Tengo un pequeño problema de diseño: en el sitio web de un cliente, mostramos información de contacto de personas en una pequeña caja. El ancho de esa caja está restringido. Da la casualidad que hay personas con nombres muy largos (esto es en Alemania, después de todo ...), y la dirección de correo electrónico es una concatenación del nombre de pila y el apellido. El resultado: con ciertos nombres, la dirección de correo electrónico desborda las restricciones dadas por el cuadro Acerca de.HTML: Hypen suave (­) sin guión?

Inserción de una ­ antes de que los resultados @ en el salto de línea correcta, pero se parece a esto:

john.doe- 
@example.com 

¿Es posible suprimir ese guión? No quiero usar <br />, porque para el 90% de los nombres, el ancho disponible es más que suficiente.

+0

'palabra-break: romper todo;' puede ayudar a – Denis

Respuesta

5

Aunque no estoy seguro de cómo esto hace varios navegadores (probablemente bastante bien), siempre se puede utilizar el carácter de espacio delgada (&thinsp;) o el espacio de ancho cero ( &#8203;). ++

john.doe&thinsp;@example.com 

++ yo no sugerir el uso del espacio de ancho cero, ya que aparentemente algunos navegadores no se mostrarán correctamente (source).

+1

Estaría interesado en ver un moderno navegador que no lo renderiza adecuadamente La página vinculada tiene información sobre dos errores detectados, los cuales se han resuelto como arreglados. – Sapph

+2

Excepto si copia y pega este correo electrónico desde un navegador en Outlook, bloc de notas, etc. obtendrá 'john.doe? @ Example.com' – joshcomley

+0

@joshcomley Acabo de probar esto con los ejemplos del violín en mi publicación, y no tuvo tal problema. – Sapph

-1

Es posible que desee echar un vistazo a la propiedad css word-wrap.

Y this page parece estar haciendo lo que desea.