How to prevent text from adapting to parent's width?

Question

I just wanted to know how to prevent text from adapting when the parent's width is changed. If you run the code below and hover the mouse over the div, you can see how the text "adapts" to the parent's width while it changes. This is what I want to avoid. What I would expect to happen is that the text stays with its initial properties (I don't care if eventually some text disappears or becomes unreadable, because this "effect" is triggered when the user swipes left and the text disappears to the left). Thank you for your help!

 .hello { background: red; border-radius: 20px; transition: 2s; width: 100%; height: 200px; } .hello:hover { width: 20%; }

 <div class="hello"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. </div>

Answer 1

You can make new div inside parent with absolute positioning

 .hello { background: red; border-radius: 20px; transition: 2s; width: 100%; height: 200px; } .hello:hover { width: 20%; } .innerText { position: absolute; }

 <div class="hello"> <div class="innerText"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. </div> </div>

Answer 2

 .hello { background: red; border-radius: 20px; transition: 2s; width: 100%; height: 200px; } .hello:hover { width: 20%; } p{ position:absolute; }

 <div class="hello"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. </p> </div>

Answer 3

Hope this helps you.

 .hello { background: red; border-radius: 20px; transition: 2s; width: 100%; height: 200px; overflow: hidden; } .hello:hover { width: 20%; white-space: nowrap; text-overflow: ellipsis; }

 <div class="hello"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. </div>

Answer 4

I would set a static width so I can prevent, the .static-container from shrinking.. but it's not dynamic, like 100% would a workaround to this would be working with media queries , in order to make it responsive...

 .hello { background: red; border-radius: 20px; transition: 2s; width: 400px; height: 200px; overflow:hidden; } .hello:hover { width: 20%; } .static-container{ width:400px; }

 <div class="hello"> <div class="static-container"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod elit diam, in condimentum eros scelerisque id. Cras tempus lectus tortor, ut elementum eros mollis consequat. Nullam ac odio eros. Phasellus at turpis tristique, facilisis neque nec, auctor turpis. Nunc ac justo gravida, lobortis lectus a, tempus felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris vitae imperdiet sapien, eget interdum lacus. </div> </div>