1.3. letter-spacing, word-spacing, white-space - Khoảng cách giữa các từ

 


Demo : https://www.lenlop123.com/2020/09/13-letter-spacing-word-spacing-white.html




<style>
  p.normal {
      letter-spacing: normal;
  }
  p.positive {
      letter-spacing: 4px;
  }
  p.negative {
      letter-spacing: -1.5px;
  }
</style>

<p class="normal">This paragraph has no additional letter-spacing applied.</p>
<p class="positive ">This paragraph is letter-spaced at 4px.</p>
<p class="negative">This paragraph is letter-spaced at -1.5px</p>





<style>
  p.normal {
      word-spacing: normal;
  }
  p.px {
      word-spacing: 30px;
  }
  p.positive {
      word-spacing: 20px;
  }
  p.negative {
      word-spacing: -5px;
  }
</style>

<p class="normal">This paragraph has no additional word-spacing applied.</p>
<p class="px">This paragraph is word-spaced at 30px.</p>
<p class="positive">This paragraph is word-spaced at 20px.</p>
<p class="negative">This paragraph is word-spaced at -5px.</p>







<style>
p {
    white-space: nowrap;
}
p.pre {
    white-space: pre;
}
p.preline {
    white-space: pre-line;
}
p.prewrap {
    white-space: pre-wrap;
}
</style>

<p>
This paragraph has         multiple spaces      and
a line break, but it will be ignored, as we used the nowrap value.
</p>
<p class="pre">
In the markup we have multiple            spaces
and a line break.
</p>
<p class="preline">
In the markup we have multiple            spaces
and a line break, but in the result multiple spaces are ignored.
</p>
<p class="prewrap">
In the markup we have              multiple
spaces and a line break.
</p>






























Nhận xét