Question

47

Add dots/ellipsis on div/span element overflow without using jquery

rated 0 times [ 51] [ 4] / answers: 1 / hits: 33250 / 13 Years ago, wed, november 16, 2011, 12:00:00

Need to implement functionality similar to what dotdotdot jQuery plugin does
but cannot use javascript frameworks (like jquery or ext).

Is there any easy way to add the dots to the content of div or span element if content takes more space then element should???
(similar to what css overflow: ellipsis setting does)

Can't use ellipsis beacause it doesn't work with many lines when height is limited.

Thank you :)

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

anayaashleyh

Add To Favorites

Follow

Total Points: 597

Total Questions: 96

Total Answers: 86

Location: Papua New Guinea

Member since Thu, Jul 9, 2020

4 Years ago

anayaashleyh questions

1 How to use array-contains operator with an array of objects in Firestore?

Wed, Jun 30, 21, 00:00, 3 Years ago

1 Update Select Option list based on other Select field selection ant design

Thu, Oct 15, 20, 00:00, 4 Years ago

1 ReactTable7 with simple tooltip when hovering < th> elements

Wed, Jul 1, 20, 00:00, 4 Years ago

1 How to make Material-UI Dialog resizable

Sun, Apr 26, 20, 00:00, 4 Years ago

1 Vuejs Accessing Data in Modal Component Using Props

Wed, May 15, 19, 00:00, 5 Years ago

View All

answered 13 Years ago brynneg · Accepted Answer

My solution to my problem can seem a little awkward, but it works for me:)

I used a little of CSS:

word-wrap: break-word;

and Javascript:

var spans = document.getElementsByTagName(span);

for (var i in spans) {

    var span = spans[i];

    if (/*some condition to filter spans*/) { // just 

        if (navigator.appName == 'Microsoft Internet Explorer') {

            span.parentNode.style.display ='inline-block';

        }

        if (span.parentNode.clientHeight > 50 ) {

            span.innerHTML = span.innerHTML.substr(0, 26) + ' ...';

        }

    }

}