【问题标题】:Angled margin for text using CSS使用 CSS 的文本倾斜边距
【发布时间】:2015-12-01 08:00:11
【问题描述】:

我正在寻找一种简单而优雅的方法来动态增加 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 /

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

【问题讨论】:

标签: html css


【解决方案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>';
}

【讨论】:

  • clip-path 适用于新的浏览器。这比其他仅适用于 chrome 桌面的答案更好。为你点赞
【解决方案2】:

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

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

【讨论】:

    【解决方案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>

    【讨论】:

      【解决方案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>
      

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

      【讨论】:

        猜你喜欢
        • 2012-11-15
        • 2019-08-04
        • 1970-01-01
        • 2014-05-21
        • 2015-08-26
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多