隐藏溢出后换行文字消失

Question

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

我在 class right_box 中使用了 overflow: "hidden"。
环绕文字已修复。
但是当我减小屏幕尺寸时，我发现一些文本被隐藏了。
我用谷歌搜索了一下，发现行高可以解决这个问题，
所以我在两个 classes 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>

Answer 1

right_box 设置了高度，因此它无法增长 height-wise 以适应内容。此外，在调整视图大小时限制宽度时，它会溢出内容。当您将 CSS 规则 overflow:hidden; 添加到 right_box 时，它会隐藏溢出并且您看不到它。

我注释掉了高度和溢出规则（大约第 424-425 行），现在您可以看到元素扩展到填充宽度，高度增长到适合内容。

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

隐藏溢出后换行文字消失

wrapping text disappearing after giving overflow hidden

html

javascript

css

reactjs

jss