【问题标题】:Automatically indent wrapped text自动缩进换行文本
【发布时间】:2014-05-07 08:23:44
【问题描述】:

这里有点菜鸟,但我基本上希望文本在包装时自动缩进。 所以而不是:

Peter piper picked a peck
of pickled peppers.

应该是:

Peter piper picked a peck
    of pickled peppers.

这是我尝试过的:

span.profile{ display:block; text-indent: -35px; /*this pulls the first line to the left*/ padding-left:35px; /*this pushes the paragraph to the right*/ padding-right:0px; text-align:justify; }

在此之后,我在整个文本周围添加了span class="profile" 标签,但问题是我希望它在每个换行符后“重置”。有没有办法让它做到这一点?

感谢您的帮助!

【问题讨论】:

  • 选择目标语言会很好...此外,我们是来帮助您的,而不是为您编写代码。那么到目前为止,您尝试过什么?
  • 对不起,这很公平。最好我想使用CSS。我试过设置大于边距的填充,但就像我说的我不是真正的编码专家......
  • @computerfreaker 好的,所以我只是尝试了这个span.profile{ display:block; text-indent: -35px;/*this pulls the first line to the left*/ padding-left:35px;/*this pushes the paragraph to the right*/ padding-right:0px; text-align:justify; 在此之后,我在整个文本周围添加了 span="profile" 标记,但问题是我希望它在每次之后“重置”越线。有没有办法让它做到这一点?
  • 我自己并不精通 CSS(我只是在玩 text-aligntext-indent 的简单组合),但我只是编辑了您的帖子以使其更清晰一些其他人也许能提供更好的帮助。
  • @computerfreaker 不用担心,感谢您的帮助!

标签: css text formatting


【解决方案1】:

我创建了一个小JSFiddle.

这是你要找的吗?

div {
    width: 500px;
}
div p {
    text-indent: -20px;
    padding-left: 25px;
}

这看起来像你为 CSS 所做的,但我为每个段落都做了它。

告诉我。

【讨论】:

  • 差不多。每次有
    时有没有办法让它“重置”?因为我基本上是在 Kompozer 中输入所有内容,然后将代码粘贴到我的网站上。 Kompozer 似乎没有使用

    标签...

  • 顺便说一下,这是我将在“公司历史”部分下使用它的页面之一的示例。正如您在“2006”下看到的那样,文本换行到开头...
  • 我自己从来没有用过Kompozer,但我的理解是它基本上只是一个所见即所得的编辑器。所以基本上你是通过点击输入/返回一两次来创建“段落”,这会插入一个或两个
    标签。 ---它为您创建的这段代码在语义上不正确。我不知道目前完全支持这样做。
  • 不完全支持但可能不值得研究的东西是 text-indent: each-line。我会建议找到一种方法来创建语义代码。段落应该在段落标签中 - 另外,您将能够完成这项工作!
  • 这很公平,但是因为我必须每天制作这些历史部分,所以我不需要太专注于代码方面。我真的不想每天花费大量额外的时间插入标签,等等。我真的是作家,而不是编码员哈哈! Kompozer 是一个所见即所得的编辑器,你知道类似的东西会使用更正确的代码吗?我绝对想让它发挥作用!
【解决方案2】:

从 cmets 看来,“我希望它在每次换行后‘重置’”是指在任何 <br> 元素之后,下一行不应缩进。那么答案是否定的,你不能那样做,因为<br> 只是一个强制换行,在 CSS 中没有办法引用这种换行后的行。

您应该重新设计 HTML 的使用。如果您在 span 元素上设置 display: block,那么您很可能应该使用像 divp 这样的块元素。不要使用<br>,您应该使用包裹文本块的块元素。

【讨论】:

    猜你喜欢
    • 2010-12-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-05-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多