CSS3带文本换行的圆 [英] CSS3 Circle with text wrap

问题描述

可以使用CSS3中的 -webkit-border-radius 绘制圆形，同时将宽度和高度限制为特定变量（例如 height：100px 和 width：100px ），因此当文本添加到圆内时，文本会换行，而不是强制圆的大小更改？

解决方案

如果您只想使用CSS处理此问题并使其具有响应性，

但是，可以使用一些相当冗长的JavaScript。

我提供三种选择。

1。仅限CSS，不完美的解决方案。

   _- == -_ 
  -  @@@@@@@ @@  -  
  -  @ @  -  
 | @ @ | 
  -  @ @  -  
  -  @@@@@@@ 
 -.__.- 
   

这在数学上是每边的半径的14.65％（与宽度或高度相同），假设是一个完美的圆。

不要忘记一个元素中的padding是相对于它的容器宽度，因此 padding：14.65％不会工作，除非，圆圈位于宽度相同的元素内。

2。 JavaScript。

字体字符大小不同。为此，您需要：

• 一个等宽字体（或关闭）字体。

这个脚本可以通过一个inline-block元素来实现这个功能CSS display：pre; 来计算所有断点（即字）的宽度。在浏览器调整大小时，您可以使用这些宽度来计算每行可以容纳多少。

但在圆圈内具有不同的长度，因此您必须从线高，圆高和包含线的宽度行数计算出来。

这不是一个缓慢的过程，但这么做 会有问题，所以我建议使用固定比例大小的字体，

或者，另一种在载入后生成圆形后调整大小的方法是：在大小和圆形大小之间重新调整大小，使用具有缩放因子的CSS3转换。

3。 HTML Canvas + JS

您可以根据下面的解决方案使用画布？这将会容易得多。即使这样，计算文本的宽度，但可能比将每个单词加载到DOM中的内嵌块更快。

在svg或画布中将文字封成圆形

Is it possible to draw a circle using -webkit-border-radius in CSS3 whilst constraining the width and height to specific variables (such as height:100px and width:100px) so when text is added inside the circle the text wraps instead of forcing the size of the circle to change?

解决方案

If you want to handle this with only CSS and make it responsive, it's not possible in the way you would like.

However, it can be done with some rather tedious JavaScript.

I provide three alternatives.

1. CSS only, imperfect solution.

   _-==-_
 -@@@@@@@@-
- @      @ -
| @      @ |
- @      @ -
 -@@@@@@@@-
   -.__.-

Which mathematically, is 14.65% of the radius on each side (which is the same as the width or height), assuming a perfect circle.

Don't forget that padding inside an element is relative to it's container's width, so padding: 14.65% won't work unless the circle is inside an element with the same width.

2. JavaScript.

Font characters have different sizes. To do this, you will need either:

• a monospace (or close) font.
• to come up with a script to calculate the width on the fly.

The script could do this by having an inline-block element with the CSS display: pre; to calculate the width of all the breakpoints (i.e. words). On browser resize, you would use these widths to calculate how many you could fit on each line.

However, each line would have a different length inside a circle, so you'd have to work out from the line-height, the circle height and the number of lines how wide the containing line would be.

This isn't a slow process but doing so onresize would be problematic, so I'd advise either using fixed ratio sizing of the font-size and the circle-size, so you wouldn't have to redo it all.

Alternatively, another way to resize the circle after it had been generated on load would be to use a CSS3 Transform with a scale factor.

3. HTML Canvas + JS

You could use a canvas instead, as per the solution below? It would be far easier. Even then, the width of the text is calculated but is likely much faster than loading each word into an inline-block in the DOM.

Wrap text to a circle shape in svg or canvas

这篇关于CSS3带文本换行的圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！