更改width属性是否会影响网格文本溢出？

Question

我有一个html文档，并且在内部有一个元素，现在myElement已设置myElement，让我们称之为display: grid。 myElement也有width: 60%，此width属性似乎正在改变文本溢出对其子网格元素的工作方式-文本超出了网格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中。对于其他孩子，事情仍然会变得很紧张，因此您可能需要在屏幕超过某个最小阈值时（通过@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>

Answer 2

这与Andy回答的相似，这是一个更新的名称，但我也找到了解决方案，请在overflow-wrap上使用#events-grid并将值设置为overflow-wrap: break-word MDN Doc on overflow-wrap says:

  

overflow-wrap CSS属性适用于内联元素，用于设置浏览器是否应在其他坚不可摧的字符串中插入换行符，以防止文本溢出其行框。