是否可以在每个元素后面都有带回车符的内联文本？

Question

问题：我如何拥有元素display:inline，但在每个span或a元素的末尾仍有回车符？

警告：

• 没有br标签
• 必须使用display：inline
• 未确定的元素宽度

HTML：

 ...
    <hgroup>
      <span>{{splash.title}}</span>
      <span>{{splash.desc}}</span>
      <a ui-sref="principle" class="btn-primary">Enter</a>
    </hgroup>

CSS：

    hgroup {
      max-width: 360px;
    }
    span {
        font-weight: 300;
        color: $base-black;
        font-size: 3.75rem;
        display: inline;
    }

Answer 1

您可以在CSS中使用类似

的伪类告诉它

span:after {
    content:"\000A";
    white-space: pre;
}

Answer 2

将display:table-caption;包含在span类

中

span {
    font-weight: 300;
    font-size: 3.75rem;
    display: inline;

    display: table-caption;
}

Answer 3

虽然white-space的另一个答案同样出色，但另一个选择是：

不是使用伪类，而是使用

设置hgroup的样式

white-space: pre-line;