Databases
StackOverflow2013
Postsdbo
POTruncate text in floated box and show it entirely when hovering
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTruncate text in floated box and show it entirely when hovering
    text
    copied!<p>I have following html:</p> <pre><code>&lt;div class="box"&gt; &lt;div class="box-left"&gt; &lt;p&gt;Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet&lt;/p&gt; &lt;/div&gt; &lt;div class="box-right"&gt; &lt;button&gt;Resource View&lt;/button&gt; &lt;button&gt;Employee View&lt;/button&gt; &lt;button&gt;Regular View&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <hr/> <p>Here's how it looks by default:</p> <p><img src="https://i.stack.imgur.com/EA5lg.png" alt="enter image description here"></p> <p>How it looks when hovering the text (we show full text length):</p> <p><img src="https://i.stack.imgur.com/FAlbq.png" alt="enter image description here"></p> <hr/> <p>Some more informations:</p> <ul> <li>I'm using text-ellipsis to truncate text (<a href="http://css-tricks.com/snippets/css/truncate-string-with-ellipsis/" rel="nofollow noreferrer">see here</a>)</li> <li>When text is hovered, we're using <code>:hover</code> selector to set <code>position:absolute</code> to text paragraph</li> <li>We don't know in advance the width of <code>.box-right</code>, neither the width of <code>.box-left</code></li> <li><code>.box</code> width equals window's width (so it's variable)</li> </ul> <hr/> <p>Actually, I have this example working with CSS and Javascript, the javascript consists of setting <code>.box-left p</code>'s element width on page load, using:</p> <pre><code>$('.box-left p').css('width', $('.box').innerWidth() - $('.box-right').outerWidth()) </code></pre> <hr/> <p>Question:</p> <ul> <li>I'm wondering if there's a CSS only solution? I've tried with <code>display: table-cell</code> without success.</li> </ul> <p>What I want to do:</p> <ul> <li>Truncate text of <code>.box-left</code> to have buttons and text on one line</li> <li>When hovering text, show it's full length</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload