una - Ajuste de línea CSS/salto de línea en guiones bajos, además de espacios en blanco y guiones

salto de linea usando css

Question

Tengo un montón de nombres de archivos realmente largos que hacen que se desborde mi formato HTML. Todos estos nombres de archivo usan guiones bajos en lugar de espacios y se dividirían / ​​envolverían fácilmente si fueran espacios. Me gusta esto.

Aquí es_un_ejemplo_de_una_realmente_long_nombre_de_archivo_que_usados_underscores_instalación_de_espacios.pdf

¿Hay alguna manera de decirle a CSS que trate los guiones bajos en el texto como si fueran espacios en blanco o guiones, y por lo tanto se ajusta / rompe con los guiones bajos también? Me gusta esto.

Aquí es_un_ejemplo_de_a_realmente_long_
file_name_that_uses_underscores_
en su lugar_de_espacios.pdf

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

Gracias.

Answer 1

Parece que no puedes usar CSS para este propósito actualmente.

Pero puede usar JavaScript para agregar etiquetas <wbr> automáticamente, 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 2

Sin HTML5, puede usar Javascript para insertar <span></span> antes o después de los caracteres que desea dividir:

//Jquery
$("#id_of_the_container").html(function(index, text) {
    return text.replace(/_/g, "_<span />");
});

//Pure Javascript
var htmlText = document.getElementById("id_of_the_container").innerHTML;
document.getElementById("id_of_the_container").innerHTML = htmlText.replace(/_/g, "_<span />");

luego use la clase CSS del contenedor para envolver las palabras:

.yourClass {
    word-break : break-word;
}

y finalmente establezca un espacio en blanco ancho de cero píxeles como contenido antes del intervalo:

.yourClass > span:before {
    content: "/200b";
}

$("#set").html(function(index, text) {
  return text.replace(/_/g, "_<span />");
});

.boxes-container > div {
  margin: 5px;
  max-width: 200px;
  border : solid black 2px;
  display: inline-block;
  padding : 5px;
}

.bigger {
  margin-right : 200px !important;
}

.wrap {
  word-break: break-word;
}

.wrap > span:before {
  content : "/200b";
}

.answer-example {
  color : RGB(0, 50, 0);
  border-color: RGB(0, 50, 0) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="boxes-container">
  <div class="bigger">
    Without_Anything,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
  <div class="wrap">
    Without_Span_tags,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
  <div id="set" class="wrap answer-example">
    With_Span_tags,
    Long_Strings_With_Underscores_Make_text_Hard_To_Wrap
  </div>
</div>

Answer 3

Sin usar JavaScript ni <wbr> podría insertar <span> </span> (note el 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...

Answer 4

Usar CSS

word-break: break-all

jsfiddle - código , result

Answer 5

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

Entonces tu HTML debería ser:

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

Puede agregar esta etiqueta en el lado del servidor antes de generar el HTML.

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