Question

我有一小段文字。我的标题应该比段落文字宽。为此，我使用max-width。第一个问题是我的单个单词段落居中。我使用width进行了修复，但是一旦执行，max-width就不再适用。这是为什么？我该如何解决？

您可以发挥创造力，但是JS解决方案对我来说是不行的。
我知道我可以包装元素以分别设置样式，但是我不想被要求在html中添加额外的标记。
稍后，我可能会看到一些图像，这些图像也不符合段落宽度。因此，长期使用hacky解决方案效果更好。

示例

您需要在手机上尝试一下。然后，该段落拒绝按比例缩小，但保持在640px。

.text {
  width: 840px;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  max-width: 640px;
  text-align: center;
}

p {
  max-width: 400px;
  width: 400px;
  /* To prevent the one word to be centered */
}

<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>
  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>
  <p>
    One word.
  </p>
</div>

Answer 1

将<p>标签包围在<div>中。然后将居中应用于该div，您可以根据需要对齐<p>标签。 Fiddle here。

Answer 2

我使用width进行了修复，但是一旦执行，max-width就不再适用。这是为什么？我该如何解决？

那是为什么？

因为容器上有align-items: center。在列方向的容器中，它使弹性项目水平居中。

居中从中间开始，并在两侧均等地伸出。因此，当您使用max-width内容简短时，文本将显示在上方较大段落的下方居中。

但是，当您使用width: 400px时，该项与上面的全长段落一样长，并且默认情况下，内容向左对齐。（如果将p设置为text-align: center，那么无论有没有width: 400px，实验都会失败。）

.text {
  width: 840px;
  background: #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  max-width: 640px;
  text-align: center;
  border: 1px dashed red;
}

p {
  width: 400px;
  text-align: center;
  border: 1px dashed red;
}

<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>

  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>

  <p>
    One word.
  </p>
</div>

我该如何解决？

没有JS或其他HTML容器，我不确定是否有可能，因为段落没有左对齐。它们只是根据内容的长度（直到最大宽度）居中。

Answer 3

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

JSfiddle：https://jsfiddle.net/x8qgtpd7/

.text {
  background: #eee;
}
h1{
  padding: 0px 5vw;
  text-align: center;
}
p{
  padding: 0px 15vw;
  max-width: 500px;
  margin: auto;
}

<div class="text">
  <h1>
    A really very long headline indeed, to tell a story
  </h1>
  <p>
    Soufflé sesame snaps tart chocolate chupa chups candy canes jujubes. Sweet brownie cheesecake tootsie roll donut bear claw macaroon brownie jelly. Cake toffee lollipop lollipop fruitcake caramels carrot cake gingerbread chocolate. Cotton candy powder
    tiramisu liquorice brownie lemon drops pastry.
  </p>
  <p>
    One word.
  </p>
</div>

Answer 4

实际上，您希望p在有扩展空间的情况下可以扩展，但也希望在没有扩展空间的情况下收缩。

因此，要点是您不想使用min-width，因为这会迫使p具有该宽度，即使它没有间距也是如此。

相反，您应该告诉p适应其所拥有的空间，但最多不能超过400像素。这可以通过max-width来实现。

代码：

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

Flex不遵守最大宽度

示例

4 个答案: