通过CSS或Javascript在“楼梯"布局中输入文字? [英] Text in 'stairs' layout by CSS or Javascript?

问题描述

我正在尝试使用inhtml/css/jquery中的一种布局(请参见附件)

I'm trying to achieve with kind of layout inhtml/css/jquery (see attach file)

有人知道如何做到这一点吗?我试图为该行添加一个 css 形状或 svg - 这很好，但是如何使文本采用这种格式?任何亮点都是令人难以置信的，根据我的研究，我找不到任何类似的信息！谢谢您的宝贵时间:)

Does anybody have any idea how this can be done ? I tried to put a css shape or svg for the line - which is fine, but how to make the text going this format ? Any highlight would be incredible, From my research I can't find any information like that ! thank you foe your time :)

这种格式呢?

推荐答案

这是JS中的一种可能性.从根本上讲，这相当于插入宽度递增的浮动div，每行高度高(我将div涂成红色以使其更加明显).您也可以直接在HTML中执行此操作.

Here's one possibility in JS. It basically amounts to inserting floated divs of increasing widths, each one line-height high (I colored the divs red to make it more obvious). You could do this straight in the HTML if you wanted too.

var stairsHeight = 500;
var lineHeight = 20;
for (var y = lineHeight; y <= stairsHeight; y+=lineHeight) {
	$(".stairs").prepend('<div style="height:' + lineHeight + 'px; width:' + y + 'px; float:right; clear:right; background:red;"></div>');
}

.stairs {width:500px; height:500px; line-height:20px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stairs">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
</div>

这篇关于通过CSS或Javascript在“楼梯"布局中输入文字?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！