CSS Text ellipsis including "More" link

javascript css ellipsis
Ferran Negre picture Ferran Negre · Sep 23, 2014 · Viewed 13.3k times · Source

So I have the following Fiddle that has set an ellipsis in a text into two lines. Then I want to have a 'More' link inline with the text.

http://jsfiddle.net/csYjC/2876/

So if our text has more than two lines, it should look like this:

enter image description here

That's correct. However:

enter image description here

That's not correct (should be inline with the text).

Code is like follows:

<div class="text">
  <div>Lorem ipsum dolor sit amet, Lorem Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem Lorem i</div>
  <a href="#">More</a>
</div>

And the css:

.text{
   display: inline;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 24px;     /* fallback */
   max-height: 48px;      /* fallback */
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}

.text a {
    position: absolute;
}

I guess must be easy... Thank you in advance.

Answer

Adam Fratino picture Adam Fratino · Sep 23, 2014

The div inside of .text is still being displayed as a block element. Use this to fix:

.text > div { display: inline; }

http://jsfiddle.net/csYjC/2880/

Related questions

HTML - how can I show tooltip ONLY when ellipsis is activated

I have got a span with dynamic data in my page, with ellipsis style. .my-class { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 71px; } <span id="myId" class="my-class"></span> document.getElementById('myId').innerText = "..."; I'd like to …

Read More
HTML text-overflow ellipsis detection

I have a collection of block elements on a page. They all have the CSS rules white-space, overflow, text-overflow set so that overflowing text is trimmed and an ellipsis is used. However, not all the elements overflow. Is there anyway …

Read More
CSS word ellipsis ('...') after one or two lines

I'm trying to create a word-wrap in JavaScript using CSS, and the condition is: If DIV contains one very long word, such as "asdasfljashglajksgkjasghklajsghl", I want to display: |asdasfljashglajk...| If DIV contains a long sentence, such as "if i had …

Read More