How to solve over flow of text in overlay?-CodePudding

The text wrap is not fulfilled in few scenarios like when the name is long enough for a line break, some part of the text is not visible due to the size of the box.

like below image

I have tried using word-break,over-flow but it didn't help .

CodePudding user response：

You can use word-wrap: break-word; property here as below:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 150px; 
  border: 2px solid #000000;
  padding: 5px;
}

div.a {
  word-wrap: normal;
}

div.b {
  word-wrap: break-word;
}
</style>
</head>
<body>


<h2>word-wrap: normal (default):</h2>
<div > This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will not break and wrap to the next line.</div>

<h2>word-wrap: break-word:</h2>
<div > This div contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

</body>
</html>

CodePudding user response：

Not sure is this what you looking for.

.box { width:300px;height:200px;border:1px solid black;}
.text { width:100%;height:100%;word-wrap: break-word; overflow-y:auto;margin:0;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div >
        <p >pppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp</p>
    </div>
    
</body>
</html>