Hoe spaties tussen tekst in HTML plaatsen?

Hoe plaatst u spaties tussen tekst in HTML? Bijvoorbeeld,

<p>a b       c</p>

Wat doe je om ruimte tussen B en C te hebben?


Antwoord 1, Autoriteit 100%

Probeer white-spacemet waarde pre.

preSEQUENS of WhiteSpace worden bewaard. Lijnen worden alleen gebroken bij nieuwe lijntekens in de bron en op <br>elementen.

p {
  white-space: pre;
}
<p>a b       c</p>

Antwoord 2, Autoriteit 80%

U kunt proberen &nbsp;ertussen. Zoals dit:

<p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p>

Antwoord 3, Autoriteit 20%

Er zijn verschillende manieren.

Pre-tag

Men is om de <pre>-tag te gebruiken, die inhoud met de WhiteSpace intact zal maken.

Space Entities

Een andere is het toevoegen van ruimte-entiteiten, zoals &nbsp;(vaste spatie). Houd er bij deze benadering rekening mee dat er verschillende ruimte-entiteiten zijn, en deze specifieke entiteit komt niet in woordvorm, wat misschien niet het gewenste gedrag is. &#32;geeft een normale spatie weer, die de browser niet mag samenvouwen, en die zoals verwacht wordt afgebroken.

Hier is een lijst met verschillende Unicode-ruimtenkan gebruiken.

CSS

Bovendien moet u gewoonlijk geen HTML-entiteiten gebruiken om ruimte te creëren tussen tekst die geen deel uitmaakt van één uniforme zin. Dit komt omdat in dit geval de betere oplossing is om marginof paddingte gebruiken om de twee te scheiden en elk in zijn eigen element te houden.

Zoals een ander antwoord vermeldt, is CSS letter-spacingook een optie als de spatiëring consistent is, maar groter dan normaal.

Hier is een voorbeeld van al deze benaderingen (de CSS is hier niet belangrijk):

th, td {
  border: 1px solid black;
  padding: 3px;
}
th {
  background-color: darkgrey;
  color: white;
}
table {
  border-collapse: collapse;
}
body {
  font-family: sans-serif;
}
<table>
  <thead>
    <tr>
      <th colspan="2">HTML Spacing</th>
    </tr>
    <tr>
      <th>Method</th>
      <th>Result</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Normal</td><td><p>a b       c</p></td>
    </tr>
    <tr>
      <td>Pre Tag</td><td><pre>a b       c</pre></td>
    </tr>
    <tr>
      <td>Margin Left</td><td><span>a </span><span>b</span><span style="margin-left: 3.5em;">c</span></td>
    </tr>
    <tr>
      <td>Non-breaking Space</td><td><p>a b&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c</p></td>
    </tr>
    <tr>
      <td>Em Space</td><td><p>a b&#8192;&#8192;&#8192;&#8192;&#8192;&#8192;&#8192;c</p></td>
    </tr>
    <tr>
      <td>Letter-Spacing</td><td><span>a </span><span style="letter-spacing: 3.5em;">bc</span></td>
    </tr>
  </tbody>
</table>

Antwoord 4, autoriteit 10%

Gebruik &nbsp;. Dit zal de lijn ook niet breken.


Antwoord 5, autoriteit 10%

Gebruik de CSS-eigenschapword-spacingom ruimte tussen woorden in te stellen. Je kunt ook <span>gebruiken en marge of opvulling toepassen.

Dus:

span { margin-left:1em }
<p>a b <span>c</span></p>

Antwoord 6, autoriteit 10%

Zoals anderen al hebben gezegd, kunt u een spatie toevoegen met: &nbsp;

Maar voeg ook tabbladen toe met: &emsp;en &ensp;

Other episodes