html - 是否可以在css中将文本证明为对角线？

Question

是否可以在 CSS/HTML 中将文本与对角线对齐？

如果是，如何，您能否分享更多关键字进行搜索，或指定路径？

像这样：

Answer 1

这是一个示例小提琴：http: //jsfiddle.net/JrM3x/

var cssmargin = 10;

$('div').each(function(){
    $(this).css("margin-left", cssmargin+"px");
    cssmargin += 10;
});

<div>
    <div>hello world</div>
    <div>how are you today?</div>
    <div>I'm good thanks</div>
</div>

您当然可以在每个需要“阶梯化”的 div 上指定一个类，并在其上使用每个类。

注意：这显然不是一个纯粹的 html css 解决方案。你可以这样做，但它根本无法扩展。此解决方案还需要使用 jQuery

一个纯 html/css 的解决方案可以这样完成，但它并不漂亮。

http://jsfiddle.net/JrM3x/1/

#one{ margin-left:10px;}
#two{margin-left:20px;}
#three{margin-left:30px;}

<div>
    <div id="one">hello world</div>
    <div id="two">how are you today?</div>
    <div id="three">I'm good thanks</div>
</div>

Answer 2

这似乎是最接近的一个。我使用了 css3 的 transform skew 属性。

body>div {
    -webkit-transform: skewX(30deg);
    margin-left: 50px;
    margin-top: 50px;
    font-style: italic;
}

工作小提琴

使用css3 属性的“缩放”、“倾斜”和“旋转” 。transform你可能会得到你的结果。:)

要不然

将嵌套元素保留在列表项中，如下所示：

<ul>
    <li>this is first line
        <ul>
            <li>this is second line
                <ul>
                    <li>this is third line</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

您还可以通过提供一些固定的左边距或填充左边来使用简单的嵌套 div 元素来完成上述技巧。

工作小提琴

Answer 3

<style>
div {margin-left:10px;}
div+div {margin-left:20px;}
div+div+div{margin-left:30px;}
div+div+div+div{margin-left:40px;}
</style>

<div>Lorem Ipsum is simply dummy text of the printing and </div><br>
<div>typesetting industry. Lorem Ipsum has been the industry's </div> <br>
<div>standard dummy text ever since the 1500s, when an unknown </div><br>
<div>printer took a galley of type and scrambled it to make a type </div>