Javascript 如何将附加文本放入其容器中

我想在页面上添加一个段落，并将段落中的每个单词添加到一个特定的

id

（我正在用

id

将每个单词包装在

span

中，以便我们以后可以控制每个单词的颜色）

代码运行良好，但有一个问题我无法解决没有一只手

我希望最大字体大小为

5vw

，我希望减小字体大小，以便在

段落容器中容纳整个段落

我尽了最大努力，但不幸的是，这还不够

使用
让fontSize=getFontSize（段落原件）我试图获得多行附加文本的高度，但我认为它只需要一行的高度！如果我能得到多行的高度

代码如下：


//我们的段落
让paragraphOriginal=“在讨论中，Adam指出有一个新的CSS属性（据我所知）特别是针对这一点。这消除了对三个元素的需要。从技术上讲，您只需要一个内联元素，但很可能您将在标题上执行此操作，因此您可能最终得到一个块父元素，这对间距来说是最好的；
//将上面的段落转换为单词数组
让paragraphWords=paragraphOriginal.replace（/\s+/g，”）.toLowerCase（）.replace（/\，|\？|\！|\：|\。/g，”）.trim（）.split（“”）；
//段落容器的尺寸
让height=document.getElementsByClassName（“段落容器”）[0].clientHeight；
让文字保持高度；
//将段落添加到页面，并为每个单词指定一个特定的id
generateParagraph（）；
函数generateParagraph（）{
让段落=document.getElementById（“段落”）；
让我们回答原型=“”；
for（设i=0；i高度）；
返回默认_size.toFixed（2）；
};
//文本高度函数的开始
函数getTextHeight（文本、字体）{
让canvas=document.createElement（“canvas”）
让context=canvas.getContext（“2d”）；
让sourceWidth=canvas.width；
让sourceHeight=canvas.height；
context.font=font；
//把文本放在某个地方
context.textAlign=“left”；
context.textbrealine=“top”；
上下文。填充文本（文本，25，5）；
//返回包含画布中所有像素总和的数组
//*4（红、绿、蓝、阿尔法）
//[像素1red、像素1green、像素1blue、像素1alpha、像素2red…]
让data=context.getImageData（0，0，sourceWidth，sourceHeight）.data；
让firstY=-1；
设lastY=-1；
//循环遍历每一行
for（设y=0；y0）{
第一y=y；
//退出循环
打破
}
}
如果（第一次>=0）{
//退出循环
打破
}
}
//循环浏览每一行，这次从最后一行开始
对于（设y=sourceHeight；y>0；y--）{
//循环遍历每一列
for（设x=0；x0）{
lastY=y；
//退出循环
打破
}
}
如果（上次>=0）{
//退出循环
打破
}
}
返回lastY-firstY；
}; //文本结束高度功能
html{
溢出：隐藏；
背景色：透明；
}
.段落容器{
位置：绝对位置；
溢出：隐藏；
左：2.45vw；
顶部：25vh；
高度：55vh；
宽度：95vw；
轮廓：0.1vw橙色虚线；
}
.段落类别{
位置：绝对位置；
空白：预包装；
字体系列：“开放式Sans”，无衬线；
字体大小：400；
颜色：#5959；
排名：0；
左：0；
右：0；
底部：0；
显示器：flex；
柔性包装：包装；
填充：0vh 1vh 20vh 1vh；
对正内容：左；
对齐项目：左；
}
我尽了最大努力为您找到一个解决方案，因此我将解释我所做的，希望它能有所帮助

首先，我
删除了getFontSize（段落）
和
getTextHeight（text，font）
，因为无论文本高度如何，它们每次都返回相同的字体大小，并且删除了一些无用的CSS规则

接下来，我添加了
scaleFontVW（）
函数，在该函数中，我可以缩放每个
span
的
字体大小和
行高，因为您需要同时执行这两项操作

接下来，
while（paragraph.scrollHeight>paragraphContainer.clientHeight）
基本上我将溢出的内容高度与容器的高度和循环进行比较，直到两者合二为一

接下来，通过减去
fontSize
的值（通过反复试验，我发现5的效果很好），每个跨度都会缩小，
段落
的
行高
，行高公式非常简单：
字体大小+字体大小*20%

有帮助的答案：以及


//我们的段落
让paragraphOriginal=“在讨论中，亚当指出