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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwox3prGnMmx8xfwUva6XnYVZtyeu40m5SrfwhmzJqcwNJ-zV3YtKJaJEZXG4ATJHO1BIFdE_SmwhAfpF8GbtQGqii7UUqq7wL3L1Q_1HvZ2dujNReZYQ3dVFBSPBov1cSNH_kfJCdv1_iQHrkshSqK-3foa2gsIbvvwiCt12x99kF6S9tGdHdDM6P/s16000/a1.png)
<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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt8g-E2TfHaBbKrSsQQw1uxBj6F7IhKGbU9gJ4Iqb-z3zHSWxWF67ugtT0md_JaqdGvZEfhDXnBmUv85cjcbvefc7jU0pfL7TvEs38WWMs0rmMAGY1exhuqAmybS8T8fPQKewIZQRG_L6pKJRnsPfTpL9eMTnynfDs9jqZ1zEa4r-vi1BJRF6BDt6w/s16000/a2.png)
<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>
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0i-ZOCFKTpK1UWkLxdtFC5EESKRuJqfWu1xjSndf0SY2wmpeutsFPAm_BthuhN0g6rt0QQW0GngBhFlaqzIgoWNkBx2vGdRhRp93W3K1HHZmJQnhktela8HB5uLbnxY0PMVLfGUWfPBfFofeO68q9KPhNmqmFvCB0_pHEGkK1A_vJN_q-aSyWCA-o/s16000/a1.png)
0 Nhận xét