Question

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

我在right_box类中使用了overflow: "hidden"。
包装文字已修复。
但是当我减小屏幕尺寸时，我看到一些文本被隐藏了。
我用Google搜索，发现行高可以解决这个问题，
所以我在两个类中给了它sportCardHeaderItemHeadingValue和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上设置了高度，因此它不能沿高度方向增长以适合内容。同样，在调整视图大小以限制宽度时，它也会使内容溢出。当您将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

隐藏溢出后消失的自动换行文本

1 个答案: