webentwicklung-frage-antwort-db.com.de

Ignorieren Sie Leerzeichen in HTML

Gibt es irgendetwas in HTML/CSS, das den Browser anweist, Leerzeichen vollständig zu ignorieren?

So oft, wenn Sie beispielsweise zwei Bilder nebeneinander platzieren möchten, versuchen Sie verzweifelt, den HTML-Code lesbar zu halten, aber der Browser fügt zwischen ihnen ein Leerzeichen ein.

Also statt so etwas:

<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" />

sie landen damit

<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" />

Welches ist einfach so schrecklich!

226
Paul

Oh, das können Sie ganz einfach mit einer einzigen Zeile CSS erledigen:

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

Nachteil, fragst du? Kein Browser hat diese äußerst nützliche Funktion implementiert (denken Sie an Inline-Blöcke im Allgemeinen). :-(

Was ich von Zeit zu Zeit getan habe, obwohl es hässlich ist, da die Nacht dunkel ist, ist, Kommentare zu verwenden:

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

sie können das font-size vom Container bis 0 und der white-space verschwindet!

114
Umesh

In den meisten Fällen ignoriert der Browser Leerzeichen, wenn es sich neben einem Blockelement befindet.

Das Problem bei Bildern (in diesem Fall) ist, dass es sich um Inline-Elemente handelt. Wenn Sie sie also in separate Zeilen schreiben, handelt es sich tatsächlich um Elemente in derselben Zeile mit einem Leerzeichen dazwischen (da der Zeilenumbruch als Leerzeichen zählt). Es wäre falsch, wenn der Browser die Leerzeichen zwischen den Bildern entfernt. Das Schreiben der Bild-Tags mit Zeilenumbrüchen zwischen den Bildern sollte genauso behandelt werden wie das Schreiben der Bild-Tags in dieselbe Zeile mit Leerzeichen zwischen den Bildern.

Sie können CSS verwenden, um die Bilder zu blockieren und nebeneinander zu platzieren. Dies löst viele Probleme mit dem Abstand, sowohl dem Abstand zwischen den Bildern als auch dem Abstand in der Textzeile unter den Bildern.

47
Guffa

Leider zählen Zeilenumbrüche als Leerzeichen.

Die beste Lösung, die ich gefunden habe, ist die Verwendung des Leerzeichens innerhalb der Tags selbst anstelle von außerhalb:

  <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" />

Es ist auch nicht ideal, ich weiß. Aber zumindest ist es kein bizarrer CSS-Hack, der von der Größe eines Leerzeichens abhängt oder auf relative Positionierung oder JavaScript zurückgreift :)

37
Jon Grant

Die neueste Lösung hierfür ist die Verwendung von display: flex an einem Außencontainer können Sie dies anhand des folgenden Beispiels versuchen:

Codepen →

(Und ja, Flexbox wird zunehmend unterstützt: 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;
}

Update: Auch wenn Sie möchten, dass Ihre Elemente umbrochen werden (wie bei Inline-Block-Elementen üblich), vergessen Sie nicht, flex-wrap: wrap in Ihren flexbox container.

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

OK, ich kann mich glücklich schätzen, dass ich mich jetzt nur darum kümmern muss, ob das mit dem Webkit (speziell dem in QT eingebetteten) funktioniert, damit es auch in Chrome und Safari) funktioniert. Scheint display: table-cell bietet alle Vorteile der Anzeige: inline-block, aber ohne den Whitespace-Nachteil

18
A2D

Was war an dieser Lösung so schwierig?

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>
16
Ozzy

Bilder sind standardmäßig Inline-Elemente. Daher wird zwischen ihnen ein Leerzeichen angezeigt. Wenn Sie Ihr Beispiel in einem Screenreader anhören, wissen Sie sofort, warum: Ohne Leerzeichen hören Sie Folgendes:

mein MinidingMein MinidingMein MinidingMein Miniding

Also benutze my mini thing. (Punkt plus Leerzeichen am Ende) als Alternativtext oder Bilder mit CSS zusammenschieben. Entfernen Sie nicht nur das Leerzeichen im Code.

6
fuxia

Wenn Sie php verwenden, funktioniert dies wunderbar. Ich habe die Lösung gefunden hier .

Ich habe ursprünglich nach etwas gesucht, um Textknoten zu entfernen, die nur aus whitespace bestehen, nachdem ich html mit etwas wie simplexml analysiert habe. , aber das ist viel billiger.

<?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;?>
3
Chinoto Vokro

Dies ist eine einfache Frage und die Antwort ist nicht so einfach.

Man kann versuchen, die in CMS nicht immer erreichbaren Leerzeichen im Quellcode zu vermeiden, da sie dort vom System automatisch eingefügt werden. Wenn Sie dies ändern möchten, müssen Sie den Kerncode des CMS tiefgreifend untersuchen.

Dann können Sie versuchen, links schwebende Bilder zu verwenden. Das ist aber gefährlich. Zunächst haben Sie per Definition keine wirkliche Kontrolle über die vertikale Ausrichtung. Und zweitens geraten Sie in ein totales Chaos, wenn Sie so viele schwebende Elemente haben, dass sie sich über mehr als eine Linie erstrecken. Und wenn Sie ein Layout haben, das auf links schwebenden Elementen basiert (die meisten von ihnen tun dies heute), können Sie sogar einige äußere schwebende Stile aufheben, wenn Sie das Schweben nach den Bildern löschen. Dies kann außer Kraft gesetzt werden, wenn Sie ein umgebendes Element schweben lassen. Eher nicht zu empfehlen.

Die einzige Lösung wäre also eine CSS-Deklaration, die den Prozess der Behandlung von Leerzeichen handhabt. Dies ist nicht Teil eines Standards (da CSS 3 noch nicht fertig ist).

Ich bevorzuge die Variante ohne Leerzeichen in HTML. Mit der Verwendung von drupal als CMS kann dies ziemlich einfach in Ihrer template.php und in den Theming-Dateien erreicht werden. Dann wähle ich Inline-Block.

P .: Inline-Block ist in den verschiedenen Browsern ziemlich kompliziert zu bekommen. Für FF 2 muss angezeigt werden: -moz-inline-box. Der Rest und IE8 können Anzeige haben: Inline-Block direkt danach. Und für lte IE 7 müssen Sie anzeigen: Inline in einer separaten Deklaration (vorzugsweise über bedingte Kommentare).

bearbeiten

Was ich benutze, um einen Inline-Block für ein Element zu erstellen

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 */
}
2
yunzen

Versuchen Sie dieses CSS:

img { display: table-cell; }
1
Djidel

HTML minimieren!

Es wird empfohlen, die Antwort zu minimieren , bevor sie an den Browser gerendert wird .

Es sei denn, Sie benötigen den Speicherplatz (und Sie haben ihn mit &nbsp;) entfernen Sie immer die Leerzeichen im Verkleinerungsprozess.

0