javascript - 隐藏溢出后环绕文本消失

Question

解决此文本的换行问题 ---> 测试 be Bhere 我在这里我在这里我在这里我在这里我正在测试 be Bhere 我在这里我在这里我在这里我在这里我是 12 34 56 78 90 123 456 7778 88889 9999 999690909090

• 我overflow: "hidden"在课堂上使用了 right_box。
• 换行文本得到修复。
• 但是当我减小屏幕尺寸时，我看到一些文本被隐藏了。
• 我用谷歌搜索，发现行高会解决它，
• 所以我在sportsCardHeaderItemHeadingValue和right_box这两个类中给出了它
• 但它仍然没有修复。
• 你能告诉我如何解决它。
• 在下面提供代码片段和沙箱。

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

sportsCardHeaderItemHeadingValue: {
    fontWeight: "bold",
    fontSize: 20,
    color: "#263238",

    wordWrap: "break-word",
    lineHeight: 1.2
  },

 right_box: {
    border: "1px solid #000",
    // padding: 5,
    // background: '#ff0',
    marginTop: 8,
    marginRight: 8,
    float: "left",
    //  width: 150,
    height: 55,
    overflow: "hidden",
    lineHeight: 1.2
  },

<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 12 34 56 78 90 123 456 7778 88889 9999 999690909090
              </div>
            </div>

标签： javascripthtmlcssreactjsjss

Answer 1

There is a height set on right_box so it can't grow height-wise to fit content. Also, when resizing the view to then restrict the width, it then overflows the content. When you add the CSS rule overflow:hidden; to right_box it then hides the overflow and you can't see it.

I commented out the height and overflow rules (approx lines 424-425) and now you can see the element expands to fill width and the height grows to fit content.

right_box: {
  border: '1px solid #000',
  // padding: 5,
  // background: '#ff0',
  marginTop: 8,
  marginRight: 8,
  float: 'left',
  //  width: 150,
  // height: 55, // don't restrict height
  // overflow: "hidden", // element can grow now so don't need to hide overflow
  lineHeight: 1.2,
},

codesandbox