Html 缩放文本而不将其打断到下一行

我有一个div，它覆盖了整个页面，其中有一些文本。我希望文本是大的，居中对齐，并在不同的屏幕大小上适当缩放，而不会将单词打断到下一行。我希望只有一行。我该怎么做

#主{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
字母间距：10px；
}
#正文{
z指数：1；
位置：固定；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
字体大小：50px；
文本对齐：居中；
空白：nowrap；
}
#名字{
字号：900；
}
#描述{
字体大小：400；
}
#向下箭头{
z指数：1；
位置：固定；
底部：25px；
左：0；
右：0；
保证金：0自动；
宽度：24px；
高度：24px；
文本对齐：居中；
}
#向下箭头：悬停{
颜色：#777！重要；
光标：指针；
}
.材质图标。md-24{
字体大小：24px；
}

考沙尔·沙阿电影摄影师
向下箭头

您可以使用

vw

作为一个单元来设置文本的字体大小，这将使其根据屏幕宽度调整大小

例如：

font size:3.5vw将给出以下结果


#主{
位置：相对位置；
宽度：100%；
身高：100%；
文本对齐：居中；
字母间距：10px；
}
#正文{
z指数：1；
位置：固定；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
宽度：100%；
字体大小：3.5vw；
文本对齐：居中；
空白：nowrap；
}
#名字{
字号：900；
}
#描述{
字体大小：400；
}
#向下箭头{
z指数：1；
位置：固定；
底部：25px；
左：0；
右：0；
保证金：0自动；
宽度：24px；
高度：24px；
文本对齐：居中；
}
#向下箭头：悬停{
颜色：#777！重要；
光标：指针；
}
.材质图标。md-24{
字体大小：24px；
}

考沙尔·沙阿电影摄影师
向下箭头
在Chrome中似乎工作正常当我在iPhone 7上查看结果时，文本被剪切并超出div，无法完全显示。当我删除字母间距时，它可以完美缩放并在div内完全显示。我可以在保持字母间距的同时完全显示吗？@YashGhelani您可以减少字体的值，或者我建议您使用media query为较小的设备（如iphone）设置一个新值