Html 使用CSS/Query调整圆圈内文本的大小

我发现各种库可以根据容器大小调整文本大小，但是我的容器是一个圆，因此我遇到了问题，因为它仍然超出了边界

下面是一把小提琴和圆圈的代码。有没有一种方法可以让它适合而不溢出？在链接的示例中，指定的字体大小是要使用的最大字体大小

.quizitemaswertext{
背景：#333；
证明内容：中心；
对齐项目：居中；
边界半径：100%；
文本对齐：居中；
利润率：5px60px；
字体系列：“新闻哥特式标准”；
字体大小：60px；
字体大小：粗体；
填充：15px；
显示器：flex；
高度：300px；
宽度：300px；
颜色：#72B74D；
边框：3倍纯黑；
边缘底部：200px；
}

自由人坐在我的座位上。我不知道你在说什么
TRUE

以下是使用的版本的解决方案

我为class

.fittext

添加了在“documentload”上执行的javascript代码，该代码遍历

querySelectorAll

元素数组

“fitText”的参数：元素、压缩器和{min，max}字体大小。在修改参数之后，这似乎得到了一个很好的结果：

window.fitText（elem，1.2，{min:'14px'，max:'60px'}）

我的javascipt代码在最后。请注意

html{font size:calc（0.625vmin+0.75rem）}

和

.quizItemAnswerText{width；height}

，两者都是

calc（9vmin+127.2px）

，都使用方程y=mx+b，即“直线的定义”

确保检查CSS中的注释

现在，您为一个圆环内的正方形添加JS代码

中间更新（2）

原始的“fittext.js”使用js

clientWidth

包括填充。添加选项（和代码）以选择是否从

clientWidth

中删除填充。需要剥去衬垫，以使“响应衬垫”正常工作

完成：

• 检查文本是否已匹配，不执行任何操作。原始代码确实忽略了这一点，我认为这是一个缺陷（或遗漏）。

现在，当文本适合元素时，“fitText”将保持

字体大小

。在里面留下了一些调试代码，将在下一次更新中消失

仍然要做：

• 为“响应填充”（y=mx+b用毕达哥拉斯调整，这可能需要一段时间才能弄清楚…）创建CSS calc（）

“使用严格”；
常量crlf='\r\n'；
常量br='
'；
//“getTextWidth”和“getDimensions”的独立版本
//用于调试或在其他地方使用
函数getTextWidth（txt、fontname、fontsize）{
var c=document.createElement（'canvas'）；//创建虚拟画布（使用css呈现不可见）
var ctx=c.getContext（'2d'）；//获取虚拟画布的上下文
ctx.font=fontsize+''+fontname；//将context.font设置为“实际”字体
var width=ctx.measureText（txt）.width；//测量字符串
c、 remove（）；//无松动端。。。
return Math.ceil（width）；//返回四舍五入宽度
};
函数getDimensions（元素）{
var cmp=getComputedStyle（元素）；
//获得包括填充在内的尺寸
var width=element.clientWidth；
变量高度=element.clientHeight；
//将字符串（+'px'）转换为浮点
var t=parseFloat（cmp.paddingTop）；
var r=parseFloat（cmp.paddingRight）；
var b=解析浮点（cmp.paddingBottom）；
var l=parseFloat（cmp.paddingLeft）；
//除去填充物
宽度-=r+l；
高度-=t+b；
//Wit手高度（包括衬垫，便于“已转换”访问）
返回{width:width，height:height，padding:{top:t，right:r，bottom:b，left:l}；
};
/*! 
*FitText.js 1.01 jQuery免费版
*
*Dave Rupert版权所有2011http://daverupert.com 
*根据WTFPL许可证发布
* http://sam.zoy.org/wtfpl/
*由Slawomir Kolodziej修改http://slawekk.info
*
*Rene van der Lende出版的v1.01，2020年3月
*-添加了“getTextWidth”和“getDimensions”
*-要选择的额外布尔参数
*（默认）带有填充
*（可选）没有填充
*/
（功能（）{
var addEvent=功能（el，类型，fn）{
如果（el.addEventListener）
el.addEventListener（类型，fn，错误）；
其他的
el.attachEvent（'on'+类型，fn）；
};
var extend=功能（obj，ext）{
for（在ext中输入var键）
if（ext.hasOwnProperty（key））
obj[键]=外部[键]；
返回obj；
};
window.fitText=功能（el、kompressor、选项、incpad）{
变量设置=扩展({
“minFontSize”：-1/0，
“maxFontSize”：1/0
}，选项）；
//2020年3月开始RvdL
变量getDimensions=函数（el）{
var cmp=getComputedStyle（el）；
//获得包括填充在内的尺寸
变量宽度=el.clientWidth；
变量高度=el.clientHeight；
//将字符串（+'px'）转换为浮点
var t=parseFloat（cmp.paddingTop）；
var r=parseFloat（cmp.paddingRight）；
var b=解析浮点（cmp.paddingBottom）；
var l=parseFloat（cmp.paddingLeft）；
//除去填充物
宽度-=r+l；
高度-=t+b；
//宽度和高度（包括便于“已转换”访问的填充）
//“fitText”中的高度和填充冗余，但谁知道。。。
返回{width:width，height:height，padding:{top:t，right:r，bottom:b，left:l}；
};
函数getTextWidth（el）{
var c=document.createElement（'canvas'）；//创建虚拟画布（使用css呈现不可见）
var ctx=c.getContext（'2d'）；//获取虚拟画布的上下文
ctx.font=getComputedStyle（el）.fontSize+'sans serif'；
//TODO:有缺陷，因为使用了固定的“无衬线”
//仅使用元素（文本）的第一个节点，因为“innerText”可能会