перенос текста после исчезновения скрытого текста - PullRequest
Новая
       11

перенос текста после исчезновения скрытого текста

1 голос
/ 29 мая 2019

чтобы исправить проблему с обертыванием этого текста ---> тестирование быть здесь, я здесь, я здесь, я здесь, я здесь, я тестировать быть, здесь я здесь, я здесь, я здесь, я здесь, я, яam 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>

1 Ответ

1 голос
/ 29 мая 2019

Высота установлена ​​на 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

...