Html 弯曲不考虑最大宽度

我有一段文字。我的标题应该比段落正文更宽。为了实现这一点，我使用了

max width

。第一个问题是我的单字段落居中。我通过使用

width

来修复它，但一旦我这样做

max width

就不再适用了。为什么呢？我怎样才能修好它

• 你可以很有创意，但JS解决方案在这里对我来说是不行的
• 我知道我可以将元素包装成单独的样式，但我不想被要求在html中添加额外的标记
• 稍后，我可能会有一些图像等也不符合段落宽度。因此，一个长期的、不太麻烦的解决方案更好

例子 你需要在手机上试试。然后，段落拒绝缩小比例，但将其自身保持在640px

.text{
宽度：840px；
背景：#eee；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
h1{
最大宽度：640px；
文本对齐：居中；
}
p{
最大宽度：400px；
宽度：400px；
/*防止一个单词居中*/
}

确实是一个很长的标题，讲一个故事

蛋奶酥芝麻酥、酸巧克力酱、巧克力酱、糖果棒、枣子。甜布朗尼芝士蛋糕tootsie卷甜甜圈熊爪杏仁饼布朗尼果冻。蛋糕太妃糖棒棒糖棒棒糖水果蛋糕焦糖胡萝卜蛋糕姜饼巧克力。棉花糖粉
提拉米苏甘草布朗尼柠檬滴糕点。


一个字。

将您的

标记环绕在

中。然后对该div应用居中，您可以根据需要对齐

标记

我通过使用

width

来修复它，但一旦我这样做

max width

就不再适用了。为什么呢？我怎样才能修好它

为什么呢

因为容器上有

align items:center

。在列方向容器中，使柔性项水平居中

定心从中间开始，并在两侧均匀地进行。因此，当您将

max width

与短内容一起使用时，文本将在上面较大的段落下方居中显示

但是当您使用宽度为400px的

时，该项目与上面的全长段落一样长，默认情况下，内容向左对齐。（如果将
p
设置为
text align:center
，则无论是否使用
width:400px
，实验都将失败）


.text{
宽度：840px；
背景：#eee；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
}
h1{
最大宽度：640px；
文本对齐：居中；
边框：1px红色虚线；
}
p{
宽度：400px；
文本对齐：居中；
边框：1px红色虚线；
}

确实是一个很长的标题，讲一个故事

蛋奶酥芝麻酥、酸巧克力酱、巧克力酱、糖果棒、枣子。甜布朗尼芝士蛋糕tootsie卷甜甜圈熊爪杏仁饼布朗尼果冻。蛋糕太妃糖棒棒糖棒棒糖水果蛋糕焦糖胡萝卜蛋糕姜饼巧克力。棉花糖粉
提拉米苏甘草布朗尼柠檬滴糕点。


一个字。

您只需使用
CSS
即可实现所需的功能，而无需添加额外的HTML标记

JSfiddle：


.text{
背景：#eee；
}
h1{
填充物：0px 5vw；
文本对齐：居中；
}
p{
填料：0px 15vw；
最大宽度：500px；
保证金：自动；
}

确实是一个很长的标题，讲一个故事

蛋奶酥芝麻酥、酸巧克力酱、巧克力酱、糖果棒、枣子。甜布朗尼芝士蛋糕tootsie卷甜甜圈熊爪杏仁饼布朗尼果冻。蛋糕太妃糖棒棒糖棒棒糖水果蛋糕焦糖胡萝卜蛋糕姜饼巧克力。棉花糖粉
提拉米苏甘草布朗尼柠檬滴糕点。


一个字。

实际上，您希望
p
在有空间扩展时扩展，但也希望它在没有空间时收缩

因此，关键是您不希望使用
min width
，因为这会强制
p
具有该宽度，即使它没有空间，也是如此

相反，您应该告诉
p
以适应它所拥有的空间，但最多只能达到400px。这是通过
最大宽度
实现的

守则：

p {
  max-width: 100%;
  width: 400px;
}

请解释一下你实际需要什么？您想在移动设备上将文本居中吗？“我知道我可以将元素包装成单独的样式，但我不想被要求在html中添加额外的标记。”您尝试过此代码吗？它似乎不起作用。这里有一个快速的例子，这与OP已经拥有的
最大宽度：400px
没有什么不同。这并不能解决问题。这是不同的，因为只有
max width:400px
将一个单词的段落居中，而OP正试图避免这一点。如果即使在手机上，标题也需要比文本长，只需在文本中添加一些横向填充。