CSS围绕中心图像的文本 [英] CSS wrap text around centred image

问题描述

如何在如此围绕中心（圆形）图片包装文字：

我试过这个 jsfiddle 但文字背后的图像，不流动它周围。

  #circle {float：positional; position：absolute;前10名％;左：40％;环绕形状：圆形（50％，50％，120px）; wrap-margin：10px; }  

 < div id =circle> ; img src =http://www.guitare-rabuffetti.fr/test/circle.png/>< / div> < div> Lorem ipsum dolor sit amet，consectetuer adipiscing elit。南cursus。 Morbi ut mi。 Nullam enim leo，egestas id，condimentum at，laoreet mattis，massa。 Sed eleitend nonummy diam。 Praesent mauris ante，elementum et，bibendum at，posuere sit amet，nibh。 Duis tincidunt lectus quis dui viverra vestibulum。暂停。 Nulla elementum dui ut augue。在毛里求斯的aliquam vehicula mi。 Maecenas placerat，nisl at consequat rhoncus，sem nunc gravida justo，quis eleifend arcu velit quis lacus。 Morbi magna magna，tincidunt a，mattis non，imperdiet vitae，tellus。 Sed odio est，auctor ac，sollicitudin in，后缀，orci。 Fusce id felis。 Vivamus sollicitudin metus eget eros.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas。在posuere felis nec tortor。 Pellentesque faucibus。 Ut accumsan ultricies elit。 Maecenas在justo id velit placerat molestie。 Donec dictum lectus非odio。 Cras a ante vitae enim iaculis aliquam。 Mauris nunc quam，venenatis nec，euismod sit amet，egestas placerat，est.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas。 Cras id elit。整数quis urna。 Ut ante enim，dapibus malesuada，fringilla eu，condimentum quis，tellus。 Aenean porttitor色泽vel dolor。 Donec convallis pede venenatis nibh。杜伊斯量。南方lacus。 Aliquam erat volutpat。 。藜。is。。。。。。。。。。。。。。。。。埃蒂亚姆 - 恩特肯尼亚解决方案

问题已解决：

实际情况：
CSS形状适用于float，因此不适用于居中图像。此属性目前仅适用于Chrome和Opera。
也许在将来会有一个非浮动元素的解决方案。查看此W3C编辑者的草稿： http://www.interoperabilitybridges.com/css3-floats/ OriginalSubmition.html

手工制作的CSS解决方案：
基本上，有2列（如在报纸上）。文本从左列开始向下。文本继续在右列的顶部，并向下。列比图像高一点。左列具有一半不可见圆以及右列 - 在中心图像的位置。两个半圆由不同长度的多个盒子构建，它们是不可见的。 （框的高度是字体的高度。）文本必须对齐。文本现在在每列的半圆周围流动。

另一个非常技术性的解决方案是使用Libre Office和Inkscape来产生一个SVG文件。
将图片导入Libre Office - 将图片包围图片 - 另存为PDF - 打开Inkscape - 另存为SVG - 在您的网页中导入SVG - 完成。

感谢大家帮助我和您的投入！

How to wrap a text around a centered (round) image like this:

I tried this jsfiddle but the text goes behind the image and does not flow around it.

#circle {
	float:positioned;
	position: absolute;
	top:10%;
	left: 40%;
	wrap-shape: circle(50%, 50%, 120px);
	wrap-margin: 10px;
        }

<div id="circle"><img src="http://www.guitare-rabuffetti.fr/test/circle.png"/></div>	

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In posuere felis nec tortor. Pellentesque faucibus. Ut accumsan ultricies elit. Maecenas at justo id velit placerat molestie. Donec dictum lectus non odio. Cras a ante vitae enim iaculis aliquam. Mauris nunc quam, venenatis nec, euismod sit amet, egestas placerat, est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras id elit. Integer quis urna. Ut ante enim, dapibus malesuada, fringilla eu, condimentum quis, tellus. Aenean porttitor eros vel dolor. Donec convallis pede venenatis nibh. Duis quam. Nam eget lacus. Aliquam erat volutpat. Quisque dignissim congue leo.
Mauris vel lacus vitae felis vestibulum volutpat. Etiam est nunc, venenatis in, tristique eu, imperdiet ac, nisl. Cum sociis natoque penatibus et 
</div>

解决方案

Question resolved :

Actual situation : The CSS shape works for float, so it's not for centered images now. This property works only for Chrome and Opera at the moment. Maybe there will be a solution for non float elements in the future. Look at this W3C editor's draft : http://www.interoperabilitybridges.com/css3-floats/OriginalSubmition.html

A hand made CSS solution : Basically, there are 2 columns (like in newspapers). The text begins in the left column and goes down. The text continues on the top of the right column and goes down. The columns are a bit higher than the image. The left column has a half invisible circle as well as the right column - on the position of the centered image. The two half circles are build by multiple boxes of different length, they are invisible. (The hight of the boxes is the height of the font.) The text must be justified. The text is now flowing around the half circles in each column. The image will be positioned over the 2 invisible half circles.

Another, not very technical solution is to use Libre Office and Inkscape to produce an SVG file. Import the picture into Libre Office - wrap the text around the image - save as PDF - open Inkscape - save as SVG - import the SVG in your Webpage - done.

Thanks everybody for helping me and for your inputs !

这篇关于CSS围绕中心图像的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！