6

Si al escribir un texto en HTML pasamos a una nueva línea, en la presentación se añade un espacio en blanco, por ejemplo si en el editor escribo:

<p>Lorem
ipsum</p>


Aparecerá en la ventana del navegador (en mi caso Chromiun 79.0.3945.79 y Firefox 72.0.1):

Lorem ipsum


Aunque este comportamiento pueda ser el deseado en la mayoría de los casos, no lo es siempre. ¿Cómo puedo evitar esto?


Editado

Salida esperada:

Loremipsum


Nota: he estado probando con la propiedad CSS "white-space"

1
  • he dejado una solución con CSS usando 'word-spacing', creo que es lo que necesitabas, échale un vistazo por si te sirve. Un saludo
    – JorgeGuz
    Commented el 18 ene. 2020 a las 9:50

2 respuestas 2

4

ACTUALIZACIÓN: Después de entender mejor lo que se pedía, para conseguirlo es necesario aplicar JavaScript, hasta donde yo se no es posible conseguirlo solo con CSS.

Un ejemplo sencllo con jQuery: https://jsfiddle.net/yqdh1sfu/

<p id="parrafo">Lorem
ipsum
</p>

El código JS:

function procesarTexto(idElement) {
    let text = $('#' + idElement).text();
    let finalText = text.replace('\n', '');
    $('#' + idElement).text(finalText);
}

$(document).ready(function() {
    procesarTexto('parrafo');
});

RESPUESTA ORIGINAL (Enfocada a preservar los saltos de línea el texto):

Puedes usar el tag <pre> para que te respete los saltos de línea:

<pre>Lorem
ipsum</pre>

Otra opción es aplicar css con white-space:

<p style="white-space: pre;">Lorem
ipsum</p>

6
  • 1
    Gracias, pero no respondes a mi pregunta. No trato de conservar saltos de línea, trato de evitar el espacio en blanco que generan. El tag pre preserva los espacios en blanco, no preserva los saltos en sí, se preservan porque se consideran espacios en blanco. pre se puede usar por ejemplo para compartir un fragmento de código manteniendo el indentado y si, saltos de línea dentro de un párrafo si se requiere, aunque para esto hay otras etiquetas HTML específicas.
    – Orici
    Commented el 17 ene. 2020 a las 21:37
  • 1
    Lo siento pero no entiendo entonces qué pretendes, ¿ Cual sería la salida esperada en tu ejemplo ? O dicho de otra forma existe un caracter '\n' en el texto del html, "Lorem\nIpsun", que por defecto se convierte en un espacio, ' ', o bien con pre se represetna como un salto de línea, si no quieres preservarlo, ¿ cómo quieres representarlo ?
    – Roberto
    Commented el 17 ene. 2020 a las 21:50
  • 1
    Espero Loremipsum. Se que es un ejemplo tonto, pero cuando me es posible adapto el problema para simplificar la cuestión. En cuanto a pre, especifico: se usa para indicar que el contenido se trate como texto plano, es decir no sea interpretado, así mantiene los espacios.
    – Orici
    Commented el 17 ene. 2020 a las 21:58
  • 1
    He actualizado la respuesta, pero me temo que es necesario usar JavaScript para conseguir lo que pides, sólo con CSS no es viable.
    – Roberto
    Commented el 18 ene. 2020 a las 9:00
  • he dejado una solución con CSS usando 'word-spacing', creo que es lo que necesitabas, échale un vistazo por si te sirve. Un saludo
    – JorgeGuz
    Commented el 18 ene. 2020 a las 9:51
1

Creo que lo que buscas, por los comentarios que leo arriba, es eliminar el espacio entre las palabras, y esto lo puedes hacer con CSS utilizando 'word-spacing'. En este caso la clase CSS tendría que ser algo así:

 .sinespacios {word-spacing: -0.5em}
      <pre class="sinespacios">Lorem ipsum</pre>

Tendrás que probar para ajustar cuanto debes pegar las palabras. De todas formas te comparto aquí un par de enlaces sobre el uso de esta propiedad por si te pueden ser de ayuda.

https://cssreference.io/property/word-spacing/

https://uniwebsidad.com/libros/referencia-css2/word-spacing

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.