CSS - 将填充添加到第二行内联文本

Question

我甚至不确定这是否可行，但我认为值得一提。

我试图解释是没有意义的，我对这类事情很垃圾，所以看一下这个演示 - http://www.deanelliott.me/braintrain/

查看6张图片上的标题如何具有橙色背景色？现在看看第二行的第一个和左侧的右侧是如何缺少填充的？

是否可以在那里添加填充，以便背景不会停留在单词的结尾/开头？

或者我应该告诉他们这是不可行的，他们将不得不忍受它？

Answer 1

这里的问题是你无法在内容包装的单词end / start处填充，因此除非你将链接的显示类型更改为块样式类型，否则这是不可能的。 “阻止”或“内联阻止”，但自然会在某种程度上影响外观。

添加以下内容可以稍微进一步：

white-space: pre-wrap;

到.blog-grid .grid-block h2 a, #sidebar h2 a规则;然而，这不是一个完整的解决方案（但这是我能想到的全部）。

Answer 2

.blog-grid .grid-block h2 a, #sidebar h2 a {
    /* other css properties */
    display: inline-block; /* or display: block */
}

Answer 3

在CSS中添加text-indent也可以正常工作

text-indent: 10px;

Answer 4

在课程“标题后倾斜”中添加一些代码 - 它为您的标题提供答案。 写可能padding-left:20px;或者如果它不起作用：margin-left:20px;

Answer 5

你可以编辑代码吗？为每一行添加跨度应该有效 span class =“line1”和span class =“line2”

<a href="#">
  <span class="line1">a safe alternative to</span>
  <span class="line2">ritalin</span>
</a>