如何用斜线而不是字母制作文本？答案

【问题标题】：How to make a text with skewed line but not letters?如何用斜线而不是字母制作文本？
【发布时间】：2014-04-23 13:11:22
【问题描述】：

我在 HTML/CSS 中有一个倾斜的文本。像这样：(http://jsfiddle.net/UPeYT/)

p {
    -webkit-transform: skew(-8deg);
-moz-transform: skew(-8deg);
-o-transform: skew(-8deg);
transform: skew(-8deg);
}

我希望文本的对齐方式倾斜，但单词本身不是是斜体。我该怎么做？

【问题讨论】：

什么是'ledder-like'？目前尚不清楚您要做什么。
他的意思是它必须从左边缩进。
我认为你最好使用旋转，而不是倾斜。这将旋转文本而不是倾斜它......
使用transform在视觉上而不是字面上转换元素，有关更多信息，请阅读我的答案here
不能用 css 但可以用 javascript。 link

标签： html css

【解决方案1】：

我已经构建了我需要的东西，但我不确定它是否正是您需要的。本质上，我正在取一段，倾斜它，然后将每个单词分成它自己的跨度，并反转倾斜。不过，我敢肯定这对于重绘的性能来说是可怕的。

fiddle

CSS：

span {
    -webkit-transform: skew(-18deg);
    -moz-transform: skew(-18deg);
    -o-transform: skew(-18deg);
    transform: skew(-18deg);
    display: inline-block;
    position: relative;
}
p {
    -webkit-transform: skew(18deg);
    -moz-transform: skew(18deg);
    -o-transform: skew(18deg);
    transform: skew(18deg);
    padding:30px;
}

javascript（使用 jquery）：

$(document).ready(function(){
    var words = $('p').text().split(' ');
    $('p').empty();
    for (var i=0;i<words.length;i++){
        if (words[i]!='') {
            $('p').append('<span>'+words[i]+'</span> ');
        }
    }
});

HTML 只是一个包含任何内容的 P 标记。

【讨论】：

即使对于不太小的文本，似乎也不会太慢。

【解决方案2】：

这样的？

我将 parent 附加到 <p> 元素并应用相反的内容！

见：http://jsfiddle.net/joseapl/UPeYT/9/

【讨论】：

不，我自己定义线条，而不是背景/父级。

【解决方案3】：

只是一个想法，但我想这是唯一正确的答案：

这是不可能的。让我告诉你我是如何得出这个答案的。我用font-style: italic 进行了尝试，如果skew 为我设置了斜体，它不应该更改文本，但默认情况下它不会变为斜体。正是skew 的转变使它成为了这种方式。如果你改变度数，你会发现它变得更直了。它旋转文本，看起来像是斜体，但实际上不是。

我的意思是：http://jsfiddle.net/UPeYT/7/

您可以看到它与您的非常不同：http://jsfiddle.net/UPeYT/10/

您可以将这些行包装在 span 或 p 标记中。你想缩进并给他们一个text-indent 来实现你想要的。

【讨论】：

性能好不好？我担心这样一个粗略的脚本解决方案会不会让它变慢。
我认为您建议在每一行添加 text-indent 和 p 标签。没有js我不知道怎么做。
嗯，是的，如果您使用 CSS 并且它是您使用它的唯一地方，那么这是一个选项而不是资源密集型。但是，如果您的整个网站都依赖它，是的，这将是密集的。即使是jQuery。请注意，如果在整个站点上使用 jQuery 选项会更好。
嗯，我可能会用服务器端代码来做，但这可能看起来很乱。另一个问题是如何将一个大段落分成单独的行？