有一个简单的方法来动态缩进一个div每一行?(Is there a simple way to dy

2019-10-21 20:55发布

有一个简单的方法来动态缩进一个div内的文本块中的每一行? 我想要的文字,以符合异形DIV我做了。 例:

Answer 1:

这并不适用于所有情况,但东西,如果你想有倾斜的缩进,你可以做的是用CSS变换播放属性。

我做了一个js小提琴来说明...

http://jsfiddle.net/ycvqqxg4/10/

编辑小提琴。

div.indenting-text{
  transform: skewX(15deg);
  font-style: italic;
}

请享用 :)

编辑:

我已经回到爵士小提琴和改进它使用比我上面提到的一个不同的方法。 这样,利用设置为倾斜面的“形状外”一个div,使CSS自然包裹的斜率,而不是它是由吉米CSS在以前版本的操纵周围的文本。

这里是JS提琴

http://jsfiddle.net/ycvqqxg4/15/



Answer 2:

你可以看看图像周围环绕文字,它可以与圆形的图像和这样做,像这样的例子显示

http://demosthenes.info/blog/916/Wrapping-Text-Around-Circular-Images-With-CSS-Shapes

我认为它会给你一个更好的效果。 您可能需要尽管创建一个空白图像模板或东西。



文章来源: Is there a simple way to dynamically indent each line in a div?
标签: html css3