使用 CSS 的文本倾斜边距

Question

我正在寻找一种简单而优雅的方法来动态增加 HTML 文本区域 (div) 的右边距，使用如下 css 和可配置的度数（例如 45 度开始）。

Lorem ipsum dolor sit amet, consectetur adipiscing elit,/
sed do eiusmod tempor incididunt ut labore et dolore   /
magna aliqua. Ut enim ad minim veniam, quis nostrud   /
exercitation ullamco laboris nisi ut aliquip ex ea   /  
commodo consequat. Duis aute irure dolor in         /
reprehenderit in voluptate velit esse cillum dolore/ 
eu fugiat nulla pariatur. Excepteur sint occaecat /

斜线示意性地表示每个文本行的边距增加。

Answer 1

您可以使用 CSS clip-path (generator)，但它的支持很差。

另一种方法是计算每行可以有多少糊状符号。

例如如果 1 个字母约为 10 像素，则 （未测试）：

[php]
$letters = explode('', $text);
$letterSize = 10;
$startingLength = 120;
$textGrid = [];
$row = 0;
$rowLength = 0;

while (!empty($letters)) {
   if (!isset($textGrid[$row])) {
       $textGrid[$row] = [];
   }

   $textGrid[$row][] = array_pop($letters);

   $rowLength++;

   if ($rowLength >= $startingLength / $letterSize) {
       $startingLength -= $letterSize; // experiment here for 45 angle.
       $rowLength = 0;
       $row++;
   }
}

foreach ($textGrid as $row) {
    echo '<span>';
    foreach ($row as $letter) {
        echo $letter;
    }
    echo '</span>';
}

Answer 2

这是另一个使用float:right 的示例 http://jsfiddle.net/t8pgkdp8/3/

您可以使用任何 css 预处理器或 javascript 生成这些样式

Answer 3

看看CSS Shapes Module Level 1。特别是 shape-outside 属性，它可以让您更改浮动元素的几何形状，但请注意它的状态为“候选推荐”，并且很可能在 FF 或 IE 目前。

Can I use shape-outside

这是一个针对不支持的浏览器的 polyfill shapes-polyfill

如果支持-webkit-shape-outside 属性，以下示例将向主容器添加一个类为shape 的元素。

if('-webkit-shape-outside' in document.body.style) {
  $('.main').prepend('<div class="shape">');
}

.main {
  width: 475px;
  height: 200px;
}

.shape {
  -webkit-shape-outside: polygon(45% 0, 100% 0%, 100% 100%, 0% 100%);
  shape-outside: polygon(45% 0, 100% 0%, 100% 100%, 0% 100%);
  float: right;
  width: 40%;
  height: 22ex;
  background-color: gray;
  -webkit-clip-path: polygon(45% 0, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(45% 0, 100% 0%, 100% 100%, 0% 100%);

}

p {
  text-align: justify;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="main">
  <p>
    Sometimes a web page's text content appears to be
    funneling your attention towards a spot on the page
    to drive you to follow a particular link.  Sometimes
    you don't notice. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod nam itaque, adipisci odit, quaerat veniam ea. Accusamus fugit mollitia blanditiis voluptas maiores, quas quisquam earum consequuntur explicabo repudiandae. Possimus, sit.
  </p>
</div>

Answer 4

我自己找到了一个解决方案，这里提到：http://www.howtocreate.co.uk/tutorials/css/slopes

基本上它相当于设置宽度增加的边框，如下所示：

<div style="border-bottom: 20px solid transparent;font-size: 0px; line-height: 0%; width: 0px;float:right;clear:right; margin-right: 50px"></div>
<div style="border-bottom: 20px solid transparent;font-size: 0px; line-height: 0%; width: 20px;float:right;clear:right; margin-right: 50px"></div>
<div style="border-bottom: 20px solid transparent;font-size: 0px; line-height: 0%; width: 40px;float:right;clear:right; margin-right: 50px"></div>
<div style="border-bottom: 20px solid transparent;font-size: 0px; line-height: 0%; width: 60px;float:right;clear:right; margin-right: 50px"></div>
<p>Some text here that will wrap with the angled border</p>

这有点难看，但确实有效。开放以获得更好的解决方案。