为什么长句子会破坏网格布局？

时间：2019-02-11 18:30:58

标签： html css css3 overflow css-grid

我希望网格保持一定比例，但是长句子会增加其所属网格的宽度。

Index.html 

<main> 
    <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</main>
<aside>
    <p>Aside</p>
</aside>

style.css 

body {
    display: grid;
}

main {
    grid-column: 1 / 8;
    border: 2px solid black;
}

aside {
    grid-column: 8 / 13;
    border: 2px solid black;
}

我尝试使用“ word-wrap：break-word”，“ word-break：break-all”，“空白：normal”，“ overflow-wrap：break-word”，“ overflow：hidden”，但他们都不起作用。如何将文本换行到网格中或隐藏溢出？

2 个答案:

答案 0 :(得分：3)

这是一种逻辑行为，您只需要了解不同大小的计算方式，并考虑到您的配置将没有任何比例。

让我们从一个简单的示例开始：

.container {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}
<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
</div>

我们已经定义了grid-column:1/8，因此我们隐含了7列，每列的大小将根据内容计算。在这种情况下，这很简单，因为我们每列的大小都相同。基本上，我们没有指定网格需要具有7列或它们都必须具有相同的大小。这是隐式定义的。

此隐式网格稍后将用于放置其他元素：

.container {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}
.container > div {
  background:red;
  height:50px;
}
<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <div></div>
</div>

如您所见，红色div将放置在先前定义的第一列上。

现在让我们添加另一个元素：

.container {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}

aside {
  grid-column: 8 / 13;
  border: 2px solid black;
}
<div class="container">
  <main>
    <p>Mauris neque quam,</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>

这是一种更为复杂的情况，其中列的总数等于12，而并非所有列的大小都相等：

enter image description here

此处进行的计算在某种程度上是复杂的 1 ，并且取决于内容。如果我们引用the specification：

  

放置网格项目后，将计算网格轨迹（行和列）的大小，说明其内容的大小和/或可用空间，如网格定义。

我们没有在网格定义中指定任何内容，因此仅内容大小将在此处确定。如果您只需要更改内容而无需使用长句，则可以清楚地注意到这一点：

.container {
  display: grid;
}

main {
  grid-column: 1 / 8;
  border: 2px solid black;
}

aside {
  grid-column: 8 / 13;
  border: 2px solid black;
}
<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <aside>
    <p>ABC</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris neque quam  .</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>A Mauris Mauris</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div>

每次我们使用不同的内容，每次我们使用不同的大小。

为避免这种情况，您需要明确定义网格的大小。对于您的情况，您希望有12列，第一列为7，第二列为5。您可以这样简单地完成操作：

.container {
  display: grid;
  grid-template-columns:7fr 5fr;
}

main {
  border: 2px solid black;
}

aside {
  border: 2px solid black;
}
<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris neque quam, .</p>
  </main>
  <aside>
    <p>ABC</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris</p>
  </main>
  <aside>
    <p>A</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>Mauris neque quam  .</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div>
<div class="container">
  <main>
    <p>A Mauris Mauris</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div><div class="container">
  <main>
    <p>A Mauris Mauris A Mauris Mauris A Mauris Mauris A Mauris Mauris A Mauris Mauris A Mauris MaurisA Mauris Mauris A Mauris Mauris A Mauris MaurisA Mauris Mauris A Mauris Mauris A Mauris MaurisA Mauris Mauris A Mauris Mauris A Mauris MaurisA Mauris Mauris A Mauris Mauris A Mauris Mauris</p>
  </main>
  <aside>
    <p>A Mauris Mauris</p>
  </aside>
</div>

1 让我们举一个简单的例子来了解如何进行计算：

.container {
  display: grid;
  width:600px;
}

main {
  grid-column: 1 / 3;
}
main > div {
  width:50px;
  height:50px;
  background:red;
}

aside {
  grid-column: 3/ 4;
}
aside > div {
  width:100px;
  height:50px;
  background:green;
}
<div class="container">
  <main>
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>

在此示例中，我们的网格宽度等于600px，第一个元素50px和第二个元素100px的自由空间为450px。隐式网格包含3列，因此我们将这个空间分成3列。一部分将到达aside（100px + 150px = 250px），因此我们将得到一个等于250px的列，其中包含一个等于的元素到100px。其他两个部分将进入main（50px + 2*150px = 350px），因此每一列都等于175px。

enter image description here

相反。为了获得相同的列大小，我们的div的大小应该是多少？

基于先前的计算，公式如下：

Ca (aside column) = (Dx + F/3)
Cm (main column) = (Dy + 2*F/3)/2

F是由（W - Dx - Dy）定义的可用空间，其中W是容器的宽度。现在我们想拥有Ca = Cm，并且在完成一些数学知识之后。

Dx = Dy/2

所以我们只需要使第一个div比第二个大两倍：

.container {
  display: grid;
  width:600px;
}

main {
  grid-column: 1 / 3;
}
main > div {
  width:calc(2*var(--s));
  height:50px;
  background:red;
}

aside {
  grid-column: 3/ 4;
}
aside > div {
  width:var(--s);
  height:50px;
  background:green;
}
<div class="container" style="--s:50px">
  <main >
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>
<div class="container" style="--s:100px">
  <main >
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>
<div class="container" style="--s:120px">
  <main >
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>
<div class="container" style="--s:200px">
  <main >
    <div></div>
  </main>
  <aside>
    <div></div>
  </aside>
</div>

enter image description here

如果我们尊重两个内容之间的关系，您可以清楚地注意到所有网格具有相同的列大小（在这种情况下为200px）。现在您可以将此计算扩展到您的实际示例，您将更好地理解。

顺便说一句，您的示例是一个特例，因为您没有可用空间，所以main中列的大小将是其内容大小除以7并减去{{1}中的一个}将其内容大小除以5。

enter image description here

答案 1 :(得分：2)

我添加了grid-template-columns:repeat(13,1fr); 

body {
    display: grid;
  grid-template-columns:repeat(13,1fr);
}

main {
    grid-column: 1 / 8;
    border: 2px solid black;
}

aside {
    grid-column: 8 / 13;
    border: 2px solid black;
}
<main> 
    <p>Mauris neque quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi non congue ullam corper. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p>
</main>
<aside>
    <p>Aside</p>
</aside>

相关问题
最新问题