Javascript 带nowrap的挠性箱未正确对齐

我在带有nowrap属性的

中有内容。我使用flex box将内容垂直和水平对齐到中心位置

由于我使用nowrap属性并将固定宽度设置为我的

，因此我的内容在容器的x和y方向溢出。我知道这将发生，因为使用的财产

我的意图是，如果内容太长而无法被容器容纳，那么它应该左对齐而不是居中对齐，并且只能在Y方向溢出

我想要不添加额外DOM的解决方案。有可能吗

div{
宽度：330px；
保证金：0自动；
高度：50px；
边框：1px实心#A7A7；
文本对齐：居中；
显示器：flex；
证明内容：中心；
对齐项目：居中；
空白：nowrap；
职位：相对
}

删除一些内容，以便可以看到其正确对齐

只需将

justify content

更改为

flex start：


div{
宽度：330px；
保证金：0自动；
高度：50px；
边框：1px实心#A7A7；
显示器：flex；
调整内容：灵活启动；
对齐项目：居中；
空白：nowrap；
职位：相对
}

删除一些内容，以便可以看到其正确对齐
CSS无法检测溢出。您将需要使用Javascript。希望您至少尝试自己编写此代码。堆栈溢出不是代码编写服务。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码，并解释您尝试了什么以及为什么它不起作用。@Paulie\u在我使用display:box属性时，它对我很有效。由于它已被弃用，我正在flex中寻找解决方案。参考这里的工作小提琴，这在css中是可能的。添加一些额外内容以方便查看iTunes，看起来这已经不可能了……即使使用flexbox。@SanthoshKumar盒子是否一直都必须是350px，还是可以更小，然后再增大到350px？@pete我希望div中的内容居中，而不是整个div。还可以将“最大宽度”设置为更大的“否”。您可以看到内容没有对齐到中心，这就可以了但这不适用于可调整大小的div…这是OP的另一项要求（尽管在评论中提到）。@Paulie_D我有解决办法。。。别担心。。。你不断更新你的投票技巧。