如何使不均匀的文本包装（不是正方形或圆形）像这样用语义和干净的HTML，CSS？ [英] How to make uneven text wrapping (not square or round) like this with semantic and clean HTML, CSS?

问题描述

如何使文本包装像这样语义和干净的HTML，CSS？与所有浏览器兼容。

如果没有其他解决方案，向< p> 添加不同的类是我想要的唯一解决方案。

$ b

解决方案

$ b

但是这样每次客户端都无法更改类，

您可以在< p> 上将图像设置为背景，然后将背景图像的透明容器悬浮在不需要文字的形状重叠。

 < p> 
< span id =block1>< / span> 
< span id =block2>< / span> 
 Lorem ipsum dolor sit amet，consectetur adipiscing elit。 ... 
< / p> 
  

使用以下CSS：

  p {
 background：url（your-image.png）no-repeat 100％0; 
} 
 
＃block1 {
 float：right; 
 width：100px; 
 height：100px; 
} 
 
＃block2 {
 clear：both; 
 float：right; 
 width：200px; 
 height：50px; 
} 
  

缺点是和你的段类解决方案一样，手动修复。您可以在此处查看。

How to make text wrapping like this with semantic and clean HTML, CSS ? With compatible in all browser.

Adding different classes to <p> is the only solution I'm thinking if there is no other solution.

but with that way every time client would not be able to change classes, which is drawback.

解决方案

You could set the image as a background on your <p> and then float transparent containers overtop of the background image in the shape that you don't want text to overlap.

<p>
    <span id="block1"></span>  
    <span id="block2"></span>  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...
</p>

With the following CSS:

p {
   background: url(your-image.png) no-repeat 100% 0;
}

#block1 {
   float: right;
   width: 100px;
   height: 100px;
}

#block2 {
   clear: both;
   float: right;
   width: 200px;
   height: 50px;
}

The drawback though is that as with your paragraph class solution, this is a very manual fix. You can see it in action here.

这篇关于如何使不均匀的文本包装（不是正方形或圆形）像这样用语义和干净的HTML，CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！