html - 使用 CSS 从段落的第二行开始缩进

标签 html css text pseudo-class indentation

如何从段落的第二行开始缩进?

我试过了

p {
    text-indent: 200px;
}
p:first-line {
    text-indent: 0;
}

p {
    margin-left: 200px;
}
p:first-line {
    margin-left: 0;
}

(with position:relative;)
p {
    left: 200px;
}
p:first-line {
    left: 0;
}

最佳答案

它真的只是您要缩进的第二行,还是第二行(即悬挂缩进)?

如果是后者,则类似于 JSFiddle将是合适的。

    div {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
    
    span {
        padding-left: 1.5em;
        text-indent:-1.5em;
    }
<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>

<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</span>

此示例展示了在 DIV 或 SPAN 中使用相同的 CSS 语法如何产生不同的效果。

关于html - 使用 CSS 从段落的第二行开始缩进,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17158253/

相关文章:

javascript - jQuery .toggle() + addClass() 似乎没有达到预期的效果

html - 开发FireBug之类的软件?

mysql - "TEXT"的 SQL 表字段设置

javascript - 我无法在 .html 文档上导入 .js 文件

html - 提交时勾选复选框

html - 如何使用 node.js 将 CSS 和 Bootstrap 文件加载到服务器?

css - 如何扩展 sass/compass 库

java - 哪个文本输入组件最后获得了焦点?

html - 背景上的 CSS/HTML 文本

html - text-center 类将不会被应用