Question

如何让div中的文本看起来像这样？我使用了单词break和width，但它与所有其他文本div不一致。

This is text meant to give you and example so                                                                    
 just notice how the second line has less 
   third line has less than the second

Answer 1

使用纯CSS进行此操作只能以一种方式完成，即使用CSS Shapes非Clip-path。

然而，我们所知道的形状在浏览器中并没有太多的支持，它也不会响应，并且必须处理固定的高度/宽度。

在下面的例子中，我在某种程度上实现了这一点。

如果我们希望文本环绕一个img，我们只需要将clear:both浮动它，那么浮动就会推动文本环绕img，即使你仍然可以看到边缘对于包含img的框，我们有一个四舍五入的img等。

每边都有一个三角形的两个元素并浮动它们使得文本介于两者之间，就像img一样，它给出了瀑布文本效果，但是我必须硬化高度这两个元素是因为100%要求父级具有高度，在这种情况下，div会对其内容的高度（即文本）进行转发。

需要一些调整。

＆＃13;

.main {
  width: 510px;
  height: 130px;
  margin: 100px auto;
  border: 1px solid;
  background: red;
  text-align: justify;
}

.left {
  float: left;
  width: 50%;
  height: 100%;
  shape-outside: polygon(0 0, 0% 100%, 100% 100%);
}

.right {
  float: right;
  width: 50%;
  height: 100%;
  shape-outside: polygon(100% 0, 0% 100%, 100% 100%);
}

＆＃13;

<div class="main">
  <div class="left"></div>
  <div class="right"></div>
  <p>This is text meant to give you and example so                                                                    
 just notice how the second line has less 
   third line has less than the second.</p>
</div>

＆＃13;

Answer 2

＆＃13;

.textAlign{
text-align:center;
}
.textAlign ul{
list-style-type: none;
}

＆＃13;

  

<div class="textAlign">
    <ul style="list-style-type: none;">
     <li>This is text meant to give you and example so</li>                                                               
     <li>just notice how the second line has less </li>
     <li> third line has less than the second</li>
   </ul>
</div>

＆＃13;

落下的瀑布文本css

2 个答案: