html - 更改宽度属性是否会影响网格文本溢出？

Question

我有一个 html 文档，里面有一个元素，现在我们称它为 myElement myElement 设置了 display: grid。 myElement 也有 width: 60%，这个宽度属性似乎正在改变文本溢出在其子网格元素上的工作方式——文本超出网格的 60 ％ 宽度。是否有解决方法使文本溢出仍能正常工作，或者我是否只需要处理 100% 空间的网格？

这是代码片段(不是很好的代表)

#events-grid {
    background-color: #14ffec;
    display: grid;
    font-size: 20px;
    grid-gap: 20px;
    grid-template-columns: repeat(10, 1fr);
    margin: 0 20%;
    padding: 20px;
    width: 60%;
}

.event {
     grid-column: 1/3;
 }

.dates {
     grid-column: 3/4;
}

.summary-event {
    grid-column: 4/9;
}

.source-event {
     grid-column: 9/11;
}

<div id="events-grid">
    <span class="event">Random Event</span>
    <span class="dates">Random Date</span>
    <span class="summary-event">Random text about the event that means nothing</span>
    <span class="source-event">Lorem ipsum dolor sit amet.</span>
</div>

这是图片(蓝色是 60% 的网格，灰色是背景，文本只是随机的 - 替换链接)

我认为这与没有空格有关，因为当我添加空格(到源事件)时它会完美溢出:

Answer 1

您可以做的一件事是将 word-break: break-all 添加到 .summary-event。对于其他 child 来说，事情仍然会变得紧张，所以当屏幕超过某个最小阈值时，您可能希望添加一些新的网格规则(通过 @media 查询)。

#events-grid {
    background-color: #14ffec;
    display: grid;
    font-size: 20px;
    grid-gap: 20px;
    grid-template-columns: repeat(10, 1fr);
    margin: 0 20%;
    padding: 20px;
    width: 60%;
}

.event {
     grid-column: 1/3;
 }

.dates {
     grid-column: 3/4;
}

.summary-event {
    grid-column: 4/9;
    word-break: break-all;
    /* Option 2: word-wrap: anywhere; 
       Option 3: overflow-wrap: anywhere;
    */
}

.source-event {
     grid-column: 9/11;
}

<div id="events-grid">
    <span class="event">Random Event</span>
    <span class="dates">Random Date</span>
    <span class="summary-event">Randomtextabouttheevent</span>
    <span class="source-event">Lorem ipsum dolor sit amet.</span>
</div>