【问题标题】:Target specific row in multi-line text?在多行文本中定位特定行?
【发布时间】:2012-10-12 12:19:13
【问题描述】:

最初的问题是我需要使一种字体的斜体比斜体字体少,但仍然比正常斜体更斜体。只有这两个可供选择,但我需要介于两者之间的东西,据我所知,没有其他方法可以使用 font-style 属性手动设置字体的倾斜度。

然后我想到了CSS3 转换属性。它允许您倾斜任何元素。计划是使用它,对于不支持它的浏览器,我会退回到看起来不太好的普通斜体。唯一的问题是,由于整个元素是倾斜的,因此文本看起来有点缩进。

看看这张照片,你会明白我的意思:

如您所见,变换使它在每一行上看起来都更加缩进。

解决方案是针对特定行并使用负边距(或文本缩进)来抵消由变换属性引起的缩进效果。

那么,是否可以在多行文本段中定位特定的文本行?

【问题讨论】:

    标签: css text target multiline


    【解决方案1】:

    不使用 CSS,也不使用 javascript。
    没有字符来标记结束行,因为单词是内联元素。

    虽然我需要查看代码,了解您是如何进行倾斜的,但我相信您在整个街区都做到了。所以也许你可以把它分解成文本。

    如果您无法将效果应用于内联元素,您可以尝试将文本放入小的浮动块元素中。

    编辑:

    see this fiddle。这是一个偏斜更多的极端情况。如您所见,倾斜的是整个块(p)。

    正如我所写,您可以使用 js 函数将其分解为小的浮动块元素。 I made a working example too。它可能应该进行优化,因为它可能会在处理上变得繁重。而且您的 CMS 仍然没有任何特殊标记。

    【讨论】:

    • 实际上,我也许可以用 javascript 做到这一点?如果可能的话,我最好避免它。 HTML 只是一个简单的

      标记,其中包含文本。我不能包装每一行,因为它必须可以通过 CMS 进行编辑,并且用标签包装每一行对他们来说太麻烦了,特别是因为他们不知道该行何时会中断,直到在浏览器。 CSS 只是从 css3please.com 复制的一个简单转换(向下滚动并查看 .matrix 框)。

    • 我已经编辑了我的答案,提供了更多细节和可能的解决方案。
    • 是的,我知道整个块是倾斜的,但是如果我可以选择特定的行,我将能够手动设置指定行的文本缩进。但是,您的解决方案要好得多!我不需要做任何特定的样式,它将应用于所有内容。我认为没有比这更好的解决方案,所以我将使用您的代码。谢谢!
    猜你喜欢
    • 1970-01-01
    • 2017-10-15
    • 1970-01-01
    • 2014-07-28
    • 1970-01-01
    • 2018-04-23
    • 1970-01-01
    • 2016-04-23
    • 2013-04-19
    相关资源
    最近更新 更多