html - dont - text-overflow css

Ignorar espacios en blanco en HTML

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo elimino el espacio entre los elementos de bloque en línea? 35 respuestas

¿Hay algo en HTML / CSS que le indique al navegador que ignore los espacios en blanco por completo?

Muchas veces cuando quiere poner, por ejemplo, dos imágenes una al lado de la otra, intenta desesperadamente mantener el HTML legible, pero el navegador coloca un espacio entre ellas.

Así que en lugar de algo como esto:

<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />
<img src="images/minithing.jpg" alt="my mini thing" />

terminas con esto

<img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" /><img src="images/minithing.jpg" alt="my mini thing" />

¡Que es tan horrible!

Answer 1

¿Qué fue tan difícil acerca de esta solución?

css

.no-whitespace {
    line-height: 0;
    font-size: 0;
}

html

<span class="no-whitespace">

    <a href=# title=''image 1''>
       <img src=''/img/img1.jpg'' alt=''img1''/>
    </a>

    <a href=# title=''image 2''>
       <img src=''/img/img2.jpg'' alt=''img2''/>
    </a>

    <a href=# title=''image 3''>
       <img src=''/img/img3.jpg'' alt=''img3''/>
    </a>

</span>

Answer 2

Desafortunadamente, las nuevas líneas cuentan como caracteres de espacio.

La mejor solución que he encontrado es usar el espacio en blanco dentro de las etiquetas en lugar de hacerlo en el exterior:

  <img src="images/minithing.jpg" alt="my mini thing" 
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing"
/><img src="images/minithing.jpg" alt="my mini thing" />

Tampoco es ideal, lo sé. Pero al menos no es un hack de CSS extraño que se basa en el tamaño de un carácter de espacio que se representa o recurre al posicionamiento relativo, o JavaScript :)

Answer 3

Esta es una pregunta simple y la respuesta no es tan simple.

Se puede tratar de evitar los espacios en el código fuente que no siempre se pueden lograr en el CMS, porque el sistema los inserta automáticamente. Si desea cambiar esto, debe profundizar en el código central del CMS.

Luego puedes intentar usar imágenes flotantes a la izquierda. Pero esto es peligroso. Al principio, realmente no tiene control sobre la alineación vertical por definición. Y en segundo lugar, te encuentras con un caos total si tienes tantos elementos flotantes, que se extienden sobre más de una línea. Y si tiene un diseño que se basa en elementos flotantes a la izquierda (la mayoría de ellos lo hacen hoy), incluso puede romper algunos estilos flotantes exteriores, si borra flotar después de las imágenes. Esto puede anularse, si flota cualquier elemento circundante. Prefiero no ser recomendado.

Entonces, la única solución sería una declaración CSS que maneje el proceso de manejo de espacios en blanco. Esto no es parte de ningún estándar (ya que CSS 3 aún no está terminado).

Prefiero el espacio en blanco no en la variante de HTML. Con el uso de drupal como CMS, esto puede lograrse con bastante facilidad en sus archivos de plantillas y temáticos. Entonces elijo inline-block.

PD: el bloque en línea es bastante complicado de obtener en los diferentes navegadores. Para FF 2 necesita mostrar: -moz-inline-box. El resto y IE8 pueden tener pantalla: bloque en línea justo después. Y para lte IE 7 necesita mostrar: en línea en una siguiente declaración por separado (preferiblemente a través de comentarios condicionales).

editar

Lo que uso para hacer un elemento en línea-bloque

elem.inline {
  display: -moz-inline-box; /* FF2 */ 
  display: inline-block; /* gives hasLayout in IE 6+7*/
}
/* * html hack for IE 6 */
* html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}
/* * +  html hack for IE 7 */
* + html elem.inline {
  display: inline; /* elements with hasLayout and display inline behave like inline-block */
}

Answer 4

La solución más nueva para esto es usar display: flex en contenedor externo, puede intentar esto con el siguiente ejemplo:

Codepen →

(Y sí, Flexbox es cada vez más compatible: http://caniuse.com/#search=flexbox )

HTML:

<!-- Disregard spaces between inline-block elements? -->
<div class="box">
  <span></span>
  <span></span>
  <span></span>
</div>

CSS

.box {
  display: flex;
  display: -webkit-flex;    
}

span {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: #fcf;
  border: 2px solid #f9f;
}

Actualización: Además, si desea que sus elementos se ajusten (como lo hacen los elementos de bloque en línea estándar), no se olvide de agregar flex-wrap: wrap ajuste a su contenedor de flexbox.

Answer 5

Las imágenes son por elementos en línea predeterminados, es por eso que ves espacios en blanco entre ellos. Si escuchas tu ejemplo en un lector de pantalla, inmediatamente sabes por qué: sin espacios en blanco, escucharías:

mi mini cosa mi mini cosa mi mini cosa mi mini cosa

Entonces, usa my mini thing. (punto más espacios en blanco al final) como texto alternativo o empuje las imágenes con CSS juntas. No se limite a eliminar el espacio en blanco en el código.

Answer 6

Los navegadores ignoran los espacios en blanco en la mayoría de los casos cuando está al lado de un elemento de bloque.

El problema con las imágenes (en este caso) es que son elementos en línea, por lo que al escribirlas en líneas separadas, en realidad son elementos en la misma línea con un espacio entre ellas (ya que el salto de línea cuenta como un espacio). Sería incorrecto que el navegador elimine los espacios entre las imágenes, escribir las etiquetas de imagen con saltos de línea entre ellas debe manejarse de la misma manera que escribir las etiquetas de imagen en la misma línea con espacios entre ellas.

Puede usar CSS para hacer que las imágenes bloqueen los elementos y los hagan flotar uno al lado del otro, lo que resuelve muchos problemas con el espaciado, tanto el espacio entre las imágenes como el espacio en la línea de texto debajo de las imágenes.

Answer 7

Oh, realmente puedes lograrlo con una sola línea de CSS :

#parent_of_imgs { white-space-collapse: discard; }

Desventaja, te preguntas? Ningún navegador ha implementado esta característica extremadamente útil (piense en los bloques en línea en general) todavía. :-(

Lo que hice de vez en cuando, aunque es feo ya que la noche es oscura, es usar comentarios:

<p><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
  --><img src="." alt="" /><!--
--></p>

Answer 8

Prueba este CSS:

img { display: table-cell; }

Answer 9

Si estás usando php , esto funciona de maravilla. He encontrado la solución here .

Originalmente estaba buscando algo para eliminar los nodos de texto que consisten solo en whitespace después de analizar html con algo como simplexml , pero esto es mucho más barato.

<?ob_start(function($html) {return preg_replace(''/>/s+</'',''><'',$html);});?>
    <img src=''./mlp.png''/>
    <img src=''./dbz.png''/>
    <img src=''./b10af.png''/>
    <img src=''./fma.png''/>
<?ob_end_flush;?>

Answer 10

puede establecer el font-size de font-size del contenedor en 0 y el white-space desaparecerá.

Answer 11

¡Minimice su HTML!

Es una buena práctica minimizar la respuesta antes de que se presente en el navegador.

Por lo tanto, a menos que necesite el espacio (y lo haya codificado utilizando   ), siempre elimine los espacios del proceso de minificación.

Answer 12

<style>
  img {
     display: table-cell
  }
</style>
<img src="images/minithing.jpg" alt="my mini thing" />...

Bien, puede que tenga suerte porque solo tengo que preocuparme ahora de que esto funcione en el webkit (específicamente el que está incrustado en QT), por lo que también funciona en Chrome y Safari. Parece display: table-cell tiene todos los beneficios de la pantalla: inline-block , pero sin el inconveniente del espacio en blanco (piense en los td con sangría)