是否有一种简单的方法来动态缩进div中的每一行？

问题描述

是否有一种简单的方法来动态缩进div内的一段文本的每一行？我希望文本符合我制作的奇怪形状的div。例如：

>解决方案

这不适用于所有情况，但是如果您希望使用css transform属性来处理倾斜缩进，则可以执行的操作。

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

编辑小提琴。

  div.indenting-text {
 transform：skewX（15deg）; 
 font-style：italic; 
} 
  

enjoy：）

我已经回到js小提琴并改进它使用一种不同于我上面提到的方法。这种方式使用了div的'shape-outside'设置为倾斜多边形，这样css自然地将文本包裹在斜坡上，而不是在前一版本中由css操纵jimmy。

这里是js小提琴

Is there a simple way to dynamically indent each line of a block of text inside a div? I want the text to conform to the oddly shaped div I made. Example:

解决方案

This won't work in all cases but something you could do if you wanted to have sloping indents is play with the css transform attribute.

I have made a js fiddle to illustrate...

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

Edited fiddle.

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

enjoy :)

EDIT:

I've gone back into the js fiddle and improved it to use a different method than the one i mentioned above. This way makes use of a div with its 'shape-outside' set to a sloped polygon so that css naturally wraps the text around the slope instead of it being jimmy rigged by css in the previous version.

here is the js fiddle

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

这篇关于是否有一种简单的方法来动态缩进div中的每一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！