用于换行文本的断词答案

【问题标题】：break-word for wrapping the text用于换行文本的断词
【发布时间】：2019-05-23 18:04:27
【问题描述】：

我是 css wrap 属性的新手。
我试图通过为机器人提供属性来包装 etx // wordWrap: "断字" overflowWrap: "断字"
但在下一个 div 中仍然重叠。
你能告诉我如何解决它吗？
我需要在所有 div 中保持相同的宽度和高度。
有什么办法可以解决。
在下面提供我的代码 sn-p 和沙箱。

https://codesandbox.io/s/material-demo-omvw3

 right_container: {
    float: "right",
    border: "1px solid #000",
    // background: '#f60',
    padding: 10
  },
  right_box: {
    border: "1px solid #000",
    // padding: 5,
    // background: '#ff0',
    marginTop: 8,
    marginRight: 8,
    float: "left",
    //  width: 150,
    height: 55
  },

  right_box_innerLabel: {
    border: "1px solid #000",
    // padding: 5,
    // background: '#ff0',
    marginTop: 8,
    marginRight: 8,
    float: "left",
    //  width: 400,
    height: 24,
    // wordWrap: "break-word"
    overflowWrap: "break-word"
  },

  status_box: {
    border: "1px solid #000",
    // padding: 5,
    //   background: '#ff0',
    margin: 8,
    float: "left"
    //  width: 200,
    // height: 150,
  },
  clr: { clear: "both" }



            <div className={classes.right_box}>
              0<div className={classes.sportsCardHeaderItemHeading}>Sports</div>
              <div className={classes.sportsCardHeaderItemHeadingValue}>
                testing the be Bhere I am here I am here I am here I am here I
                am testing the be Bhere I am here I am here I am here I am here
                I am
              </div>
            </div>

            <div className={classes.right_box}>
              1<div className={classes.sportsCardHeaderItemHeading}>Sports</div>
              <div className={classes.sportsCardHeaderItemHeadingValue}>
                gfbkl;gfkl;gf kl;klkl;kl; k;lkl;kl;kl;kl; kl;kl;kl;kl;bgf
                kkl;;klkl;
              </div>
            </div>

【问题讨论】：

我不确定它想要的结果是什么，但如果你想隐藏任何溢出的文本，请在你的 div 的 CSS 中设置 overflow: hidden;
你看过css Grid吗？如果没有，请看这个CSS Grid Tricks
@Ted 谢谢它的工作

标签： javascript html css reactjs

【解决方案1】：

在您的情况下，如果您的盒子的高度是动态的，overflow-wrap 就足够了。

但是如果高度是固定的，你可以使用：

overflow: hidden;

或者，专门针对垂直轴：

overflow-y: hidden;

本文包含word-wrap 和overflow-wrap 的有用演示：https://css-tricks.com/almanac/properties/o/overflow-wrap/

【讨论】：