CODEWITHSUNDEEP
htmlcssellipsis
mark
mark

Reputation: 5070

ellipsis for multiline text in Chrome

Is there anything like -o-ellipsis-lastline for Google Chrome?

I'm building a Chrome extension and would like to ellipsize multiline text using CSS.

Upvotes: 5

Views: 2597

Answers (2)

user1846747
user1846747

Reputation:

At present there is no ellipsis for multiline text... But you can do ellipsis effect for multiline using simple conditions. Here is an example...

Say you have an html like this...

<div class="class_name"><%=message%></div>

And you render your text at run time... Your text will be rendered and placed in the div tag instead of the message template. So what you can do is...

<% if(message.length < 100) { %>
  <div class="class_name"><%=message%></div>
<% } else { %>
  <div class="class_name"><%=message.slice(0,80)%>...</div>
<% } %>

If your text is more than 100 characters it will show a ellipsis effect(at the end of 80 characters)

Note: the values 100 and 80 are optional. You can change as you concern...

Hope it helps :)...

Upvotes: 0

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

It is impossible to create ellipsis pure CSS due to W3 spec for text-overflow.

But If you are developing Chrome Extensions you have already using JavaScript, so here is some demos and plugins to solve your problem:

I'm using the last plugin on my own projects.

Upvotes: 1

Related Questions