insert

Question

I'm trying to add [read more] button to multiple line ellipsis layer.

<p class="description">this is long text.this is long text. <button type="button">expand</button></p>

.description {
  width: 300px;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.description button {
  margin: 0; padding: 0 0 0 10px;
  background-color: transparent; border-width: 0; outline-width: 0;
  font-size: 14px; color: #3f8f7b;
}

https://jsfiddle.net/redhork7/symuzrmt/

the result should be like,

this is long text.this is long text.this is long text.this is long text.
this is long text.this is long text.this is long text.this is long text.
this is long text.this is long text.this is long text...   [more button]

is it possible?

score 0 · Answer 1 · answered Jun 09 '17 at 02:30

0

The button needs to be at the right margin of the last line or it can be below the text block? If yes, put it outside the text element
but
if you need it to be at the bottom right corner, you can set the text content as position:relative and the button as position:absolute /right:0 /bottom:0 , however this way the button is going to overlap the characters at the end of the box.

answered Jun 09 '17 at 02:30

Marcelo F.

385
1
3
7

Marcelo F. - the button should be inside of box and not overlap the characters. – Chang Hoon Yang Jun 09 '17 at 07:59

score 0 · Answer 2 · answered Jun 09 '17 at 02:35

Try This:

.wrapper {
  position: relative;
  display: inline-block;
  width: 360px;
}

.description {
  width: 300px;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.btn {
  margin: 0; padding: 0 0 0 10px;
  background-color: transparent; border-width: 0; outline-width: 0;
  font-size: 14px; color: #3f8f7b;
  position: absolute;
  bottom: 15px;
  right: 0;
  cursor: pointer;
}

<div  class="wrapper">
 <p class="description">this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text.this is long text. </p>
        <button type="button" class="btn">expand</button>
</div>

score 0 · Accepted Answer · answered Jun 09 '17 at 07:56

0

I've just found javascript library for adding more button after ellipsis(...).

http://dotdotdot.frebsite.nl

it supports the option, jQuery.dotdotdot({ 'after': '.classname' }) for add button.

answered Jun 09 '17 at 07:56

Chang Hoon Yang

19
2

insert to the end of layer styled text-overflow:ellipsis

3 Answers3

insert