javascript - 为内部的文本添加悬挂缩进

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>

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

悬挂缩进的例子（谢谢@Mohsen）

问题说明（以黄色文本开头的行距左侧太远，应缩进，使其与上方行的“链接”对齐”）：

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

Answer 1

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

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

工作小提琴

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

Answer 2

使用 CSS：

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

jsFiddle 示例

Answer 3

将文本包裹在 a 中<span>，然后使用左边距/填充设置样式。

编辑：如果您无法编辑 HTML，请向锚点添加边距

Answer 4

我认为您的问题没有脚本免费的解决方案，因为空格似乎使它成为不可能。怎么样：缩进 - 元素中的所有内容<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'对“删除 '  ' - 仍在尝试”的回答。

演示

先试后买

Answer 5

不要使用不间断的空格进行缩进。正如您所经历的那样，他们只会缩进第一行。相反，请使用正确的 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.

Answer 6

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

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