小编Mar*_*enk的帖子

以下标记和CSS会在Chrome中导致奇怪的行为:

#parent {
  background: yellow;
  height: 120px;
  margin-bottom: 20px;
  width: 100px;
  word-wrap: break-word;
}
#box {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
}

<div id="parent">
  <div id="box"></div>
  <div>OIL</div>
</div>
<div id="parent">
  <div id="box"></div>
  <div>OWL</div>
</div>

小提琴: https ://jsfiddle.net/7sq3ybxr/

上面的示例(包含单词OIL)会导致单词中断,即使右侧没有空间.较低者没有.我假设它与字符宽度有关.在其他浏览器中,该字始终显示在框下方,如预期的那样.

有没有人知道导致这种行为的原因或是否有解决方法的想法？但是,大小,浮点和自动换行属性必须保留.

编辑:哦,顺便说一句,写这样的标记似乎解决了它,但它不是我可以控制的东西(想象用户通过tinyMCE输入):

<div id="parent">
    <div id="box"></div>
    <div>
        OIL
    </div>
</div>

我有一个react组件,它以网格模式显示一个项目的一维列表.每个项目具有相同的宽度和高度,它们位于三列内.可能有很多这些,所以我决定使用Masonry组件给反应虚拟化一个旋转,这似乎是为这个用例编写的.它运作良好,但有一点需要注意:如果物品改变了它们的高度,我不能让砌体注意到.

这是一个简化的例子:

constructor(props) {
    [...]
    this.cellMeasurerCache = new CellMeasurerCache({
        defaultHeight: this.state.height,
        fixedWidth: true,
    });

    this.cellPositioner = createMasonryCellPositioner({
        cellMeasurerCache: this.cellMeasurerCache,
        columnCount: 3,
        columnWidth: 250,
        spacer: 20,
    });
}

[...]

cellRenderer({ index, key, parent, style }) {
    return (
        <CellMeasurer
            cache={this.cellMeasurerCache}
            index={index}
            key={key}
            parent={parent}
        >
            <div style={style}>
                [...]
            </div>
        </CellMeasurer>
    );
}

resetMasonry() {
    this.cellMeasurerCache.clearAll();

    this.cellPositioner.reset({
        cache: this.cellMeasurerCache,
        columnCount: 3,
        columnWidth: 250,
        spacer: 20,
    });

    this.masonryRef.recomputeCellPositions();
}

render() {
    return (
        <AutoSizer>
            {({ height, width }) =>
                <Masonry
                    cellCount={this.state.list.length}
                    cellMeasurerCache={this.cellMeasurerCache}
                    cellPositioner={this.cellPositioner}
                    cellRenderer={this.cellRenderer} …