Text inside span should overflow on div with ellipsis

Question

I am not able to see my full text after implementing an ellipsis. I want to see the full text on hover and looking forward to see in the same line. I tried doing this but had no luck.

<div class="box"> <div class="box-left"> <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet. Lorem Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. LoremLorem ipsum dolor sit amet.12345</p>x </div> </div>

.box { width: 600px; height: 2em; position: relative; background-color: #ddd; } .box > div { position: absolute; height: 100%; } .box-left { left: 0; width: 250px; } .box-left > p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .box-right { right: 0; width: 350px; } .box-left:hover { width: 100%; } .box-left:hover + .box-right { display: none; }

Fiddle: http://jsfiddle.net/dp6Xs/67/

Matt Jenkins · Accepted Answer · 2017-01-13 02:19:35Z

You should be able to just add

.box-left > p:hover { text-overflow: shown; overflow: visible; }

to your CSS and have the entire line be visible at a time. This won't expand the .box class's width, though, so you will be overflowing the background color. A quick solution to this would be to just have your box's hover state be the one that triggers expanding the text.

.box:hover { width: auto; } .box:hover .box-left p { overflow: visible; text-overflow: shown; }

How you go about doing that would be dependent on your end-goal, though.

kzhao14 · Accepted Answer · 2017-01-12 17:32:14Z

0

Simply add a .hover event

.box-left > p:hover { text-overflow: shown; }

jsfiddle

answered Jan 12, 2017 at 17:32

kzhao14

2,66017 silver badges22 bronze badges

6 Comments

tt0206 Over a year ago

i didn't see any changes, its still not showing full text.

kzhao14 Over a year ago

You said you wanted hover. If you hover over the text it shows all of it

tt0206 Over a year ago

if you can see text is ending with 12345 but its not coming.

tt0206 Over a year ago

I have issue to display full text if div is ending. for example in example jsfiddle.net/dp6Xs/80 i have text Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet 123456789 ###### . on hover its only displaying Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet 12 as div width is 400px. now here i dont want to see full text which is ending with # without increasing width of div. hope i am more clear now.

kzhao14 Over a year ago

OK. I will update my answer. So you don't want anything do for hover?

|

Collectives™ on Stack Overflow

Text inside span should overflow on div with ellipsis

2 Answers 2

Comments

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Related