logo标签列表

使用CSS将文本环绕在圆形周围

csscss-shapes
6
我一直在想这是否可能。一段围绕着图片的文本。在这种情况下，图片是圆形的。我已经能够使用形状将文字向一侧推移，但无法完全包含它。
我只找到了一个例子，但无法从给出的例子中重新创建它： enter image description here
好问题，但你尝试过什么了吗？你有一些代码卡住了吗，至少有一些标记和CSS的例子吗？ - davidkonrad
3
关于用户体验的一个问题，那么这样的文字应该如何阅读？ - web-tiki
可能是如何在非矩形图像周围包装文本？的重复问题。 - Ryan
大卫，不是很确定，我的意思是...只是使用shape-outside掩盖一个区域，这是正常的操作，但我找不到任何一个能够将文本环绕在形状周围的人，相反它被用于将形状/图像放在文本旁边。上面的示例来自一个包含以下内容的文档： - Dan Graham
<style> #circle { wrap-shape: circle(50%, 50%, 30px); wrap-margin: 10px; } </style> <div id="circle"> <img src="mycircle.png"/> </div> <div>Lorem ipsum</div> 使用原始图像的 alpha 通道来定义定位浮动形状可能更容易。 <style> #circle { background: url(mycircle.png); wrap-image: url(mycircle.png); wrap-margin: 10px; } </style> <div id="circle"></div> <div>Lorem ipsum</div> - Dan Graham
1个回答
5
我不知道如何像您的模型一样将文本环绕在圆形周围。正如评论所述，为了获得更好的用户体验，文本应该分成两个段落并包裹在圆形的两侧。在这种配置下，您可以将文本环绕在圆形周围。但是，请注意，这种解决方案在浏览器支持方面非常差。
此方法使用shape-outside属性，如此答案所示，仅适用于现代webkit浏览器： 演示 text wrapped around circle 

body{margin:0;padding:20px;width:830px;margin:0 auto;}
p{
  width:400px;
  margin-right:15px;
  text-align:justify;
  overflow:hidden;
  float:left;
}
p:before{
  content:'';
  width: 200px;
  height: 600px;
}
#left:before{
  float:right;
  shape-outside: circle(40% at 100% 50%);
}
#right:before{
  float:left;
  shape-outside: circle(40% at 0 50%);
}
<p id="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida. Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus. Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus. Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>
<p id="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac quam dignissim, tristique eros eget, aliquam nulla. Pellentesque dapibus mattis massa, eu dapibus arcu commodo vel. Vestibulum id suscipit felis, nec malesuada lacus. Nam lacinia elementum mauris ut lacinia. Nulla sed congue mi, in vehicula sapien. Nulla at ipsum sed metus feugiat interdum. In ultricies sem nec facilisis tincidunt. Suspendisse commodo ex sed ullamcorper gravida. Mauris velit mauris, egestas et est sit amet, ultricies mollis ipsum. Nunc sit amet quam ac nibh molestie porttitor sit amet sit amet ante. Mauris sollicitudin sit amet ligula non gravida. Curabitur auctor sollicitudin ante, ut rhoncus massa. Ut eu iaculis orci. Aliquam sit amet tortor tellus. Quisque iaculis tellus varius pellentesque blandit. Aenean sed sapien et ex vehicula bibendum. Proin nec orci id mauris semper facilisis. Vivamus massa purus, commodo et ullamcorper dignissim, dictum vitae tellus. Duis vel lacus posuere, pulvinar felis sit amet, viverra enim. Sed elementum eros et sem luctus, sed volutpat metus finibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam sodales tincidunt rhoncus. Pellentesque felis dolor, tempus ac ex ac, dictum lacinia ligula. Quisque ornare hendrerit erat, tincidunt dignissim quam auctor id. Duis pellentesque enim in ante pretium luctus. Morbi dignissim enim sollicitudin augue venenatis, porta sodales tortor auctor. Mauris tincidunt dui at lectus commodo cursus. In bibendum ac nunc accumsan porta. Aliquam ac sem vitae ligula pellentesque pulvinar non in velit. In molestie diam eu vulputate iaculis. Mauris fermentum, elit sit amet tincidunt tempor, lorem arcu iaculis leo, aliquam feugiat nulla eros eu enim. Pellentesque hendrerit magna ut ligula ultricies, in euismod sapien luctus. Suspendisse potenti. Vestibulum porta malesuada egestas. Cras vehicula est a purus tempus, eu volutpat diam tempus. Integer eu est faucibus, pulvinar eros at, porta enim. Aenean nec lorem nec arcu fringilla lacinia vitae non quam. Nullam ultrices, felis vitae hendrerit luctus, mi turpis tincidunt ex, eget pulvinar nulla turpis quis tellus. Phasellus nec lorem vel turpis consectetur viverra. Cras a tellus mi. Pellentesque congue sodales orci. Curabitur at facilisis nunc. Donec vel congue metus. Suspendisse id dui leo. Aenean sed dolor aliquet, molestie justo et, sodales risus. Proin ornare sagittis lectus quis condimentum.</p>

嘿，谢谢你提供的代码片段。我知道这个特定的方法，但更好奇的是是否有人实现了我的原始查询。从用户体验角度来看，这张图片很糟糕，但它只是一个例子，附带的代码似乎不起作用，所以我只是出于好奇。 - Dan Graham
@DanGraham 也许你提到的代码使用了 shape-inside，但目前没有任何浏览器支持它。 - web-tiki
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接