Desvinculación de palabras CSS/salto de línea en guiones bajos además de espacios en blanco y guiones

Question

Tengo un montón de nombres de archivo muy largos que hacen que se desborde mi formato HTML. Todos estos nombres de archivo usan guiones bajos en lugar de espacios y se romperán/ajustarán fácilmente si fueran espacios. Me gusta esto.

Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf

¿Hay alguna manera de saber CSS para tratar de subrayado en el texto como si fueran espacios en blanco o guiones, y por lo tanto abrigo/BREAK en subraya también? Me gusta esto.

Here_is_an_example_of_a_really_long_
file_name_that_uses_underscores_
instead_of_spaces.pdf

Para mis propósitos, no puedo usar un script para hacer esto. Tampoco quiero usar el ajuste de palabra: truco de palabra de ruptura porque normalmente no funciona sin especificar también un ancho. Además, se rompe arbitrariamente en medio de las palabras.

Gracias.

Answer 1

Puede usar la etiqueta <wbr> (http://www.quirksmode.org/oddsandends/wbr.html) que permite que el navegador se rompa donde quiera que lo coloque.

Así el código HTML debe ser:

Here_<wbr>is_<wbr>an_<wbr>example_<wbr>of_<wbr>a_<wbr>really_<wbr>... 

puede añadir esta etiqueta en el lado del servidor antes de la salida del HTML.

Una alternativa es la entidad ​ que tiene un espacio de ancho cero. A veces, esto funciona mejor en ciertos navegadores.

Answer 2

uso de CSS

word-break: break-all

jsfiddle - code, result

Answer 3

Parece que no se puede utilizar CSS para este fin actualmente.

Pero se puede utilizar JavaScript para agregar <wbr> etiquetas de forma automática, por ejemplo:

var arr = document.getElementsByClassName('filename'); 
 
for(var i = 0; i < arr.length; i++) { 
 
    arr[i].innerHTML = arr[i].innerHTML.replace(/_/g, '_<wbr/>'); 
 
}

body { width: 250px; }

<a class="filename">Here_is_an_example_of_a_really_long_filename_that_uses_underscores_instead_of_spaces.pdf</a>

Answer 4

Sin el uso de JavaScript ni <wbr> podría insertar <span> </span> (nótese la espacio) con el siguiente CSS :

span{ 
    width: 0; 
    overflow: hidden; 
    display: inline-block; 
} 

El marcado:

Here_<span> </span>is_<span> </span>an_<span> </span>example...