Tucker Connelly Tucker Connelly - 3 months ago 23
CSS Question

jQuery dotdotdot not working with calc

Applying calc to a width of a containing div stops the jQuery dotdotdot plugin from working.

html {
font-size: 62.5%;
div#outer {
width: calc(100% - 1px);
div#inner {
width: 200px;
height: 100px;
font-size: 4rem;

<div id="outer">
<div id="inner">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec tortor consequat, facilisis arcu iaculis, congue orci. Duis in dui augue. Nullam ultricies arcu ante, vitae iaculis ipsum hendrerit eu.</div>

Here's the fiddle.

Can someone help find a fix or workaround?



You need to specify the div to use. You can't use all divs like you did.

$(function () {

Note that you can also use Ellipsis CSS property to avoid overflow (but you can't add automatically a text like "read more" or other stuffs that dotdotdot offers) : http://www.w3schools.com/cssref/css3_pr_text-overflow.asp