Css 将内容宽度设置为自动等于宽度

问题标题可能更清楚，但如果给定一些文本，如果浏览器宽度允许它放在一行上，那么我希望它居中，否则，我不希望只将一个单词换行到下一行，我如何确保它将两行的长度分开？如果有一个CSS的唯一方式，这是最好的，否则，我想在角2它

i、 e:

备选案文1： 使用flexbox：

使用

flex wrap:wrap

并使用

div

包装文本，这样当需要包装时，文本将在您想要的位置中断

.centered{
文本对齐：居中；
利润率：10vh 15vw；
显示器：flex；
柔性包装：包装；
对齐项目：居中；
证明内容：中心；
}

这里有一些有趣的文字这里有一些有趣的文字

在这里，我希望能有所帮助。必须将容器设置为文本对齐：居中以居中文本。如果希望其为流体，请将其宽度设置为100%。您还可以添加填充，这样当您切换到移动设备时，它看起来不会被填充

正文{
文本对齐：居中；
}
正文>div{
宽度：100%；
高度：自动；
文本对齐：居中；
}
正文>div>div{
边缘底部：20px；
文本对齐：居中；
边框：1px纯黑；
保证金：自动；
填充：40px；
}
.web{
宽度：400px；
文本对齐：居中；
高度：50px；
}
.手机{
宽度：100px；
高度：80px；
}
.集装箱{
宽度：100%；
高度：自动；
文本对齐：居中；
}

这里有一些有趣的文字
这里有一些有趣的文字

你是什么意思？

Desktop:
[Screen Edge]...."Some interesting text is here"....[Screen Edge]

Phone:
[Screen Edge]....."Some interesting"......[Screen Edge]
[Screen Edge]......."text is here"........[Screen Edge]

NOT 
Phone:
[Screen Edge]."Some interesting text is"..[Screen Edge]
[Screen Edge]..........."here"............[Screen Edge]