Set width to overflow:visible-CodePudding

In the attached code I have ellipsis for a string. On Hover, I make overflow:visible so that the entirety of text is visible to user.

However let's say I wanted to make the text visible, but I want to specify the width of the overflow, and if it goes beyond a certain point (in this case if it's longer than the width of the mainDiv), it would break and show the remaining text on a second line.

In this example I have specified the width of the mainDiv to be 300px, however in my actual app, it is actually set to a %, so I don't have specific width in pixels. I would like to estimate that my overflow:visible would have a width of about width:40vw.

Not sure if something like that can be accomplished with just CSS or if I'll need JS to do this.

<!DOCTYPE html>
<html>
<head>
<style> 

#mainDiv{
    width:300px;
    border: 1px solid #000000;
}
div.b {
  white-space: nowrap; 
  width: 100px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  
}

div.b:hover{
    overflow:visible;
    
}

</style>
</head>
<body>
<div id="mainDiv">
<h2>text-overflow: ellipsis:</h2>
<div >Hello world this string is very long and should show in two lines.</div>
</div>

</body>
</html>

CodePudding user response：

Is this what you want to have happen? I just set the text to wrap on hover, and set the width to fill the current box its in.

Added:

white-space: normal

width: auto

to div.b:hover

<!DOCTYPE html>
<html>
<head>
<style> 

#mainDiv{
    width:300px;
    border: 1px solid #000000;
}
div.b {
  white-space: nowrap; 
  width: 100px; 
  overflow: hidden;
  text-overflow: ellipsis; 
  
}

div.b:hover{
    overflow:visible;
    white-space: normal;
    width: auto;
}

</style>
</head>
<body>
<div id="mainDiv">
<h2>text-overflow: ellipsis:</h2>
<div >Hello world this string is very long and should show in two lines.</div>
</div>

</body>
</html>