为 <li> 内的文本添加悬挂缩进答案

【问题标题】：Add hanging indent to text inside of <li>为 <li> 内的文本添加悬挂缩进
【发布时间】：2013-09-17 14:40:41
【问题描述】：

（为清晰起见，多次编辑）

注意：我不是编写 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？

【问题讨论】：

悬挂缩进的意思？
'我不是写 HTML 的人' 太棒了...
hanging indent
this 你在追求什么？？

标签： javascript jquery html css text-indent

【解决方案1】：

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

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

Working Fiddle

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

【讨论】：

与其保留&nbsp;s，我认为最好删除它们并增加text-indent 和padding-left 的大小。但是，这是假设 HTML 可以编辑。
@Mr_Green：这不是我要找的。以链接开头的行位于正确的位置。只有当这些行换行时才会出现问题。
@dmr 尝试在 css 代码中使用 ul,li{ padding: 0px; margin: 0px; }。

【解决方案2】：

使用 CSS：

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

jsFiddle Example

【讨论】：

【解决方案3】：

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

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

【讨论】：

注意：我不是编写 HTML 的人。
可能是我的好朋友的评论。
@user1671639 我们仍然希望他是编写 CSS/JS 的人 ;)

【解决方案4】：

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

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

【讨论】：

【解决方案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。

【讨论】：

我无法控制 HTML。我只能使用 javascript/jQuery 更改它或使用纯 CSS 解决方案。

【解决方案6】：

我认为您的问题没有无脚本的解决方案，因为空格似乎无法解决。怎么样：缩进<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(/&nbsp;/gi, ''));
});

替换功能改编自genesis'答案为“Remove '&nbsp;' - still trying”。

演示

Try before buy

【讨论】：