Обертывание текста исчезает после того, как переполнение скрыто
чтобы исправить проблему переноса этого текста ---> тестирование быть Bздесь я здесь я здесь я здесь я здесь я я здесь я здесь я здесь я здесь я здесь Мне 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>
@DrewReese привет, когда я уменьшаю размер экрана, я не вижу этот текст 12 34 56 78 90 123 456 7778 88889 9999 999690909090 e89n0.codesandbox.io
Если содержащий элемент не может увеличиваться, т. е. имеет высоту 55 пикселей, и вы ограничили ширину, он выйдет за пределы элемента. Вы добавили правило overflow: hidden;, которое скрывает это переполнение. Какого результата вы пытаетесь достичь? Вы хотите, чтобы высота right_box росла, чтобы соответствовать содержанию? Вы хотите, чтобы высота оставалась равной 55 пикселям и отображалась горизонтальная прокрутка? Что-то другое?
@Drew, эй, я хотел, чтобы высота right_box росла, чтобы соответствовать содержимому
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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,
},
Что вы ожидали от установленной высоты и скрытого переполнения? Можете ли вы перефразировать свой вопрос, неясно, что вы просите исправить. Каков ваш ожидаемый результат?