将悬挂缩进添加到<li> </li>中的文本

Question

（为清晰起见编辑了几次）

注意：我不是编写HTML的人。

以下是HTML的格式（注意：链接在同一行之后的链接和文本）：

<li>
    <strong>Title of section</strong>
    <br>

    &nbsp;&nbsp;&nbsp;
    <!-- Add hanging indent to subsequent lines if text goes onto second line-->
    <a>link here</a> Some text here...
    <br>

    &nbsp;&nbsp;&nbsp;
    <!-- Add hanging indent to subsequent lines if text goes onto second line-->
    <a>another link</a> More Text ... 
</li>

我要做的是在每个以链接开头的行中添加一个悬挂缩进并继续使用文本，这样如果文本继续到下一行，后续行将缩进。

Example of hanging indent（谢谢@Mohsen）

问题的说明（以黄色文字开头的行从左到左开始，它应该缩进，以便在它上方的行上与“链接”排成一行“）：

有没有办法用纯CSS做到这一点？如果没有，用javascript或jQuery？

Answer 1

这可以使用text-indent和padding-left / margin-left来实现。

li{
    text-indent: -25px;
    padding-left: 25px;
}

Working Fiddle

“ text-indent ”属性（实验性）还有一个值hanging。检查MDN。

Answer 2

使用CSS：

li{
    list-style:none;
    padding-left:10px;
}
li strong{
    display:block;
    margin-left:-10px
}

jsFiddle Example

Answer 3

将文本换行<span>，然后用左边距/填充格式化。

编辑： 如果您无法编辑HTML

，请为锚点添加边距权限

Answer 4

我认为链接和文本应该在同一行。如果是这样，请尝试使用CSS

li a{ display: inline-block; margin-right: 2em; }

Answer 5

我不认为你的问题有一个免费的脚本解决方案，因为白色空间似乎无法实现。怎么样：缩进<li> - 元素中的所有内容，带回标题并删除所有空格。

<强> CSS

li {
    padding-left: 10px;
}

li > strong {
    display:block;
    margin: 0 0 0 -10px;
}

<强>的JavaScript

$('ul > li').each(function() {
    $(this).html($(this).html().replace(/ /gi, ''));
});

替换功能改编自genesis'回答“Remove ' ' - still trying”。

<强>演示

Try before buy

Answer 6

不要使用不间断的空格来缩进。正如您所经历的那样，他们只会缩进第一行。相反，请使用正确的HTML：

<li>
    <strong>Title of section</strong>
    <p><a>link here</a> Some text here that might go into a second line</p>
    <p><a>another link</a> More Text that is indented even in subsequent lines when text goes onto second or more lines</p>
</li>

现在，您可以使用margin-left或padding-left缩进段落，如果您想以不同的方式缩进第一行（在任一方向上），您可以使用text-indent。