Question

我正在尝试在<h5>

中显示消息

<h5>S  e  n  t  i  m  e  n  t       a  n  a  l  y  s  i  s</h5>

Codepan：CODEPAN

的CSS：

h5
{
    margin-left: 36%;
    color:#C0C0C0;
    text-decoration:underline;
}

它应该在每个字符和单词之间的两个空格之间显示空格。但它连续显示所有角色没有空间。

Answer 1

使用white-space: pre样式保留空白区域。

h5
{
    margin-left: 36%;
    color:#C0C0C0;
    text-decoration:underline;
    white-space: pre;
}

Answer 2

使用letter-spacing属性。

HTML：

<h5>Sentiment analysis</h5>

CSS：

h5{
    margin-left: 36%;
    color:#C0C0C0;
    text-decoration:underline;
    letter-spacing:10px;
}

DEMO here.

Answer 3

使用letter-spacing css规则

h5
{
    margin-left: 36%;
    color:#C0C0C0;
    text-decoration:underline;
    letter-spacing: .5em;
}

Demo

Answer 4

将html更改为普通单词。

HTML

<h5>Sentiment analysis</h5>

CSS

 letter-spacing is for space between letter. And word-spacing is for space between word.

 h5
 {
      margin-left: 36%;
      color:#C0C0C0;
      text-decoration:underline;
      letter-spacing:4px;
      word-spacing : 5px;
 }

DEMO：http://cdpn.io/EvFsD

Answer 5

您必须使用属性white-space，特别是pre-wrap。

h5 {
    margin-left: 36%;
    color: #C0C0C0;
    text-decoration: underline;
    white-space: pre-wrap;
}

<强> Updated CodePen

您可以找到有关此媒体资源的更多信息 here 。

Answer 6

对于字母之间的间距，请使用“字母间距” 同样对于字间距使用“字间距”

h5{
letter-spacing : 3px;
word-spacing : 5px;
}

您可以根据需要更改px值。

格式化<h>标签中的文本以显示带空格的文本</h>

6 个答案: