6
A
回答
5
我不知道周围cicle的方式,文本换行的方法在你的模拟中完成。正如所评论的,为了更好的用户体验,文本应该分成两段,并且包裹在圆圈的每一侧。在此配置中,您可以将文字包裹在圆上。但要小心这个解决方案对浏览器的支持很差。
这种方法使用在this answer和所示的shape-outside
属性将只在现代WebKit浏览器工作:
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>
+0
嘿,感谢片段。我意识到这种特定的方法,更加好奇看看是否有人获得了我最初的查询。 UX的智慧很糟糕,但它仅仅是一个例子,随它提供的代码似乎不起作用,所以再次出于好奇。 – 2015-02-05 18:56:28
+0
@DanGraham可能你正在谈论的代码使用'shape-inside',目前任何浏览器都不支持。 – 2015-02-05 18:58:30
相关问题
- 1. Android围绕文本绘制圆圈
- 2. 围绕一个大圆圈移动一个小圆圈
- 3. 在iOS中添加多个围绕着圆圈的圆圈
- 4. 围绕圆圈值添加标签
- 5. 围绕圆圈旋转组别单独
- 6. 围绕圆圈旋转图像?
- 7. 围绕我的位置绘制圆圈
- 8. 如何用尽可能小的圆形区域围绕文字制作圆圈?
- 9. 动画文字围绕一个圆圈旋转
- 10. 围绕线条的圆圈 - 崇高文字3
- 11. 围绕半个圆圈的位置元素(CSS)
- 12. 围绕超链接的CSS圈
- 13. 在圆圈周围绘制文字
- 14. 如何使用CSS用圆圈包围数字?
- 15. 圆圈键CSS
- 16. 如何让图像围绕自身旋转并围绕圆圈旋转?
- 17. css/javascript围绕圆弧旋转图像
- 18. drawTextOnPath使用hoffset绘制文字绕圆圈?
- 19. 使用Javascript在Google Map中围绕标记绘制圆圈
- 20. 用javascript围绕一个圆圈移动元素
- 21. 如何触摸和拉动文字在Android上围绕一个圆圈旋转?
- 22. 如何用CSS围绕DIV围绕DIV
- 23. 无法使用CSS圆圈
- 24. 我想围绕我的位置绘制圆圈
- 25. 围绕许多不同半径的点画一个圆圈
- 26. Tkinker围绕圆圈坐标处理蟒蛇3
- 27. 径向css3围绕一个圆圈动画
- 28. <html5>围绕圆圈画三角形
- 29. js很难定位div围绕一个圆圈
- 30. D3.js围绕一个圆圈绘制矩形
好问题,但你有什么尝试?你有什么代码在你被困住的地方,至少是一些标记和CSS的例子吗? – davidkonrad 2015-02-05 17:40:40
只是关于用户体验的问题,但你应该如何阅读这些文字? – 2015-02-05 17:45:20
[我如何绕非矩形图像缠绕文本?]的可能重复?(http://stackoverflow.com/questions/9129862/how-an-i-wrap-text-around-a-non-rectangular-image) – Ryan 2015-02-05 18:01:24