i有一个grid
容器,该容器具有固定宽度,一个行和列包含一个单词。当我使用fr
单元来大小列时,overflow-wrap: break-word
不会包裹该单词,从而导致列中的单词溢出。
为了最好的理解和文档,如果没有可接受的断裂点,则overflow-wrap: break-word
应该在任何时候断裂,以防止溢出。
两件事似乎解决了这个问题。一种是具有列尺寸的px
单元。其次是文本容器上的overflow: hidden
。我在铬(V73(和Firefox(V66(上观察到相同的行为。
有人知道这种行为背后的原因吗?
https://jsfiddle.net/vdx90qeg/2/
<div class="container">
<div class="item1">
someverylongword
</div>
</div>
.container {
display: grid;
grid-template-columns: 1fr;
/*using 'px' instead of 'fr' works */
grid-template-areas: "item1";
width: 80px;
border: 1px solid black;
}
.item1 {
grid-area: "item1";
overflow-wrap: break-word;
/* overflow: hidden; */
/* works when uncommented */
}
看起来这个问题与https://css-tricks.com/preventing-a-grid-blowout/solves
非常相似将列设置为minmax(0, 1fr)
,而不仅仅是1fr
。此方法使该列具有最小宽度,默认为auto
。目的是将列从无限尺寸的容器转换为绝对尺寸的容器。
codepen链接:https://codepen.io/thissushiguy/pen/mydxjb