Text innerhalb der Spannweite sollte auf Div mit Ellipse überlaufen

Question

Ich bin nicht in der Lage, meinen vollständigen Text nach der Implementierung einer Ellipse zu sehen. Ich möchte den gesamten Text im Hover sehen und freue mich darauf, in derselben Zeile zu sehen. Ich habe es versucht, aber ich hatte kein Glück.

<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/

Answer 1

Sie sollten nur

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

zu Ihrem CSS hinzufügen und die gesamte Zeile auf einmal sichtbar sein. Dies wird jedoch nicht die Breite der Klasse .box erweitern, so dass Sie die Hintergrundfarbe überlaufen werden. Eine schnelle Lösung hierfür wäre, dass der Hover-Status Ihrer Box den Text expandiert.

.box:hover { 
    width: auto; 
} 

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

Wie Sie dabei vorgehen, hängt jedoch von Ihrem Endziel ab.

Answer 2

Fügen Sie einfach ein .hover Ereignis

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

jsfiddle