Question

以下是示例html代码

<div style="width:100px;height:100px">
    12345 1234 1234 1234 123 12345 1234 1234 123 1234 12345
</div>

我想要这样的效果：

12345 1234 1234
1234 1234 123
12345 1234
1234 1234
123 1234
12345

或

12345
123 1234
1234 1234
12345 1234
1234 1234 123
12345 1234 1234

或

12345 1234 12345
 1234 1234 235
  12345 123 1234
   1234 123 212
    123 1234 12
     1234 12345

我尝试使用text-align，但结果不是我预期的。

如果不添加许多<br>和$nbsp，或者通过硬代码添加许多<div style="margin...">，如何才能实现此效果？

感谢。

Answer 1

如果不添加许多<br>和&nbsp，或者通过硬代码添加许多<div style="margin...">，如何才能实现此效果？

你不能。心形，长颈鹿形等也是如此.DOM元素几乎是矩形的。

你必须做一些像使用Javscript的事情。你并不是非常具体的要求（等宽字体，保持单词等），但这是一个例子。

<div id="trapezoid" style="width:100px;height:100px"></div>

<script>
    var data = '12345 1234 1234 1234 123 12345 1234 1234 123 1234 12345';
    var lines = [];
    data.split(' ').reduce(function(str, word, i, array) {
        str += word;
        if(lines.length === 0 || str.length > lines[lines.length-1].length || i === array.length - 1) {
            lines.push(str);
            return '';
        }
        return str;
    }, '');
    document.getElementById('trapezoid').innerHTML = lines.join('<br>');
</script>

Answer 2

我知道这是不标准解决方案，而且对于当前年份而言，至少这不适用于大多数用户，但要做到这一点，您可以使用一些CSS前沿功能，如“< em> CSS形状模块“。

如果您使用Chrome，则启用CSS区域（Chrome 20+）将启用 chrome：// flags 并启用实验性Web平台功能。一个非常简单的测试页面可能如下所示：

<!DOCTYPE HTML>
<html>
  <head>
    <title>CSS Exclusions - Shape inside</title>
    <meta charset="UTF-8">

    <style type="text/css">
        #trapezoid {
            float: center;
            margin-top: 1em;
            width: 60em;
            height: 30em;
            -webkit-hyphens: auto;
            -webkit-shape-inside: polygon(0 0, 15% 0, 10% 20%, 0 20%);
            overflow: hidden;
        }
    </style>
  </head>

  <body>
    <div id="trapezoid">
      12345 1234 1234 1234 123 12345 1234 1234 123 1234 12345  
    </div>
  </body>

</html>

这就是出来的结果：

HTML-CSS output

您可以在此处查看更多示例：http://adobe.github.io/web-platform/samples/css-exclusions/basic/shape-inside-simple.html

如何将文本对齐为梯形？

2 个答案: