换行符

Question

• 我是css wrap属性的新手。

• 我试图通过赋予bot属性来包装etx // wordWrap：“断词” overflowWrap：“断词”

• ，但在下一个div中仍会重叠。

• 你能告诉我如何解决它吗？
• 我需要在所有div中保持相同的宽度和高度。
• 有什么办法可以解决它。
• 在下面提供我的代码段和沙箱。

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>

Answer 1

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

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

• overflow: hidden;

或者，专门针对垂直轴：

• overflow-y: hidden;

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