Looking for a solution to the text wrapping issue in this content---> trying to figure out what can be done here as I am testing the waters and exploring new territory with my work. Am I getting closer? Or farther away? Testing, testing, 1, 2, 3...
- I attempted using
overflow: "hidden"within the right_box class. - Fortunately, the wrapping of text issue was resolved as intended.
- However, upon resizing the screen, some of the text is mysteriously disappearing.
- After extensive research online, it was suggested that adjusting the line height could solve the problem,
- Therefore, I applied this fix to both sportsCardHeaderItemHeadingValue and right_box classes.
- Despite all efforts, the problem still persists.
- Can someone guide me on how to resolve this issue?
- Providing code snippet and sandbox link below for reference.
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>