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），但它的支持非常差。

其他方法是计算每行可以有多少符号。

E.g。如果1个字母是〜10px，而不是（未测试）：

[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属性，它将允许您更改浮动元素的几何，但要注意它的状态为＆＃34;候选推荐＆＃34;并且很可能目前无法在 FF 或 IE 中使用。

Can I use shape-outside

以下是没有支持的浏览器shapes-polyfill

的填充

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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>

它相当流畅，但确实有效。打开以获得更好的解决方案。

使用CSS的文本边距

4 个答案: