CODEWITHSUNDEEP
htmlcss
Mady
Mady

Reputation: 5286

Wrap a text within only two lines inside div

I want to wrap a text within only two lines inside div of specific width. If text goes beyond the length of two lines then I want to show ellipses. Is there a way to do that using CSS?

e.g.

Sample text showing wrapping
of text in only two line...

Upvotes: 151

Views: 486649

Answers (14)

Ashish Singh
Ashish Singh

Reputation: 1079

CSS only solution for Webkit

// Only for DEMO
$(function() {

  $('#toggleWidth').on('click', function(e) {

    $('.multiLineLabel').toggleClass('maxWidth');

  });

})
.multiLineLabel {
  display: inline-block;
  box-sizing: border-box;
  white-space: pre-line;
  word-wrap: break-word;
}

.multiLineLabel .textMaxLine {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}


/* Only for DEMO */

.multiLineLabel.maxWidth {
  width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multiLineLabel">
  <span class="textMaxLine">This text is going to wrap automatically in 2 lines in case the width of the element is not sufficiently wide.</span>
</div>
<br/>
<button id="toggleWidth">Toggle Width</button>

Upvotes: 16

Subham Raj
Subham Raj

Reputation: 113

<tag> {
  max-height: calc(2 * 1.5em); /* 2 lines of 1.5em each */
  line-height: 1.5em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* number of lines to show */
  -webkit-box-orient: vertical;
}

This code uses the -webkit-box and -webkit-line-clamp properties to achieve the desired effect of showing only 2 lines of text and then adding ellipses for any remaining text. The max-height property sets the maximum height of the p element to 3em (2 lines of 1.5em each), and line-height sets the height of each line to 1.5em. The overflow property is set to hidden to hide any overflow beyond the maximum height, and text-overflow is set to ellipsis to add ellipses for any hidden text.

Upvotes: 2

Manohar Reddy Poreddy
Manohar Reddy Poreddy

Reputation: 27395

Below worked for me:

CSS:

.longWordBreakParent {
  display: flex;
}
.longWordBreak {
  word-break: break-all;
}

HTML:

<div className="longWordBreakParent">
    <span className='longWordBreak'>someverylongtextthatcannotbefitinoneline</span>
</div>

For more details, see:
. https://developer.mozilla.org/en-US/docs/Web/CSS/display
. https://developer.mozilla.org/en-US/docs/Web/CSS/word-break

Upvotes: 0

Bish Nu
Bish Nu

Reputation: 1

I have the answer for this "Achieving both multiple lines of text and ellipses appears to be the realm of Javascript".

WebkitLineClamp: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp WebKItBoxOrient:https://developer.mozilla.org/en-US/docs/Web/CSS/box-orient

`.textWithTwoLine {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
  }`

Upvotes: 0

Asiddeen bn Muhammad
Asiddeen bn Muhammad

Reputation: 601

CSS only

    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

Upvotes: 34

Mujahid Bhoraniya
Mujahid Bhoraniya

Reputation: 1584

In all these examples, let’s assume we have:

#someDiv {
  width: 250px;
  overflow: hidden;
}

Upvotes: -3

Obyno Pac
Obyno Pac

Reputation: 143

@Asiddeen bn Muhammad's solution worked for me with a little modification to the css

    .text {
 line-height: 1.5;
  height: 6em; 
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: block;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
 }

Upvotes: 1

ArturoRomero
ArturoRomero

Reputation: 320

Typically a one-line truncate is quite simple

.truncate-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Two line truncate is a little bit more tricky, but it can be done with css this example is in sass.

@mixin multiLineEllipsis($lineHeight: 1.2rem, $lineCount: 2, $bgColor: white, $padding-right: 0.3125rem, $width: 1rem, $ellipsis-right: 0) {
  overflow: hidden; /* hide text if it is more than $lineCount lines  */
  position: relative; /* for set '...' in absolute position */
  line-height: $lineHeight; /* use this value to count block height */
  max-height: $lineHeight * $lineCount; /* max-height = line-height * lines max number */
  padding-right: $padding-right; /* place for '...' */
  white-space: normal; /* overwrite any white-space styles */
  word-break: break-all; /* will break each letter in word */
  text-overflow: ellipsis; /* show ellipsis if text is broken */

  &::before {
    content: '...'; /* create the '...'' points in the end */
    position: absolute;
    right: $ellipsis-right;
    bottom: 0;
  }

  &::after {
    content: ''; /* hide '...'' if we have text, which is less than or equal to max lines and add $bgColor */
    position: absolute;
    right: 0;
    width: $width;
    height: 1rem * $lineCount;
    margin-top: 0.2rem;
    background: $bgColor; /* because we are cutting off the diff we need to add the color back. */
  }
}

Upvotes: 5

Alexander Cheprasov
Alexander Cheprasov

Reputation: 61

Try something like this: http://jsfiddle.net/6jdj3pcL/1/

<p>Here is a paragraph with a lot of text ...</p>

p {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    width: 300px;
}

p::before {
   content: '...';
   float: right;
   margin-top: 1.5em;
}

Upvotes: 6

vinesh
vinesh

Reputation: 4903

Another simple and quick solution

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

The reference to the original question and answer is here

Upvotes: 114

Erik Philips
Erik Philips

Reputation: 54618

The best one I've seen which is CSS only and responsive comes from Mobify Developer Blog - CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS:

JS Fiddle Example

CSS:

html, body, p { margin: 0; padding: 0; font-family: sans-serif;}

.ellipsis {
    overflow: hidden;
    height: 200px;
    line-height: 25px;
    margin: 20px;
    border: 5px solid #AAA; }

.ellipsis:before {
    content:"";
    float: left;
    width: 5px; height: 200px; }

.ellipsis > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        

.ellipsis:after {
    content: "\02026";  

    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right; position: relative;
    top: -25px; left: 100%; 
    width: 3em; margin-left: -3em;
    padding-right: 5px;

    text-align: right;

    background: -webkit-gradient(linear, left top, right top,
        from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

Html:

<div class="ellipsis">
    <div class="blah">
        <p>Call me Ishmael. Some years ago &ndash; never mind how long precisely &ndash; having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen, and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off &ndash; then, I account it high time to get to sea as soon as I can.</p>
    </div>
</div>

Upvotes: 22

Eric Tjossem
Eric Tjossem

Reputation: 2706

I believe the CSS-only solution text-overflow: ellipsis applies to one line only, so you won't be able to go this route:

.yourdiv {

    line-height: 1.5em; /* Sets line height to 1.5 times text size */
    height: 3em; /* Sets the div height to 2x line-height (3 times text size) */
    width: 100%; /* Use whatever width you want */
    white-space: normal; /* Wrap lines of text */
    overflow: hidden; /* Hide text that goes beyond the boundaries of the div */
    text-overflow: ellipsis; /* Ellipses (cross-browser) */
    -o-text-overflow: ellipsis; /* Ellipses (cross-browser) */
}

Have you tried http://tpgblog.com/threedots/ for jQuery?

Upvotes: 16

jackwanders
jackwanders

Reputation: 16020

Limiting output to two lines of text is possible with CSS, if you set the line-height and height of the element, and set overflow:hidden;:

#someDiv {
    line-height: 1.5em;
    height: 3em;       /* height is 2x line-height, so two lines will display */
    overflow: hidden;  /* prevents extra lines from being visible */
}

--- jsFiddle DEMO ---

Alternatively, you can use the CSS text-overflow and white-space properties to add ellipses, but this only appears to work for a single line.

#someDiv {
    line-height: 1.5em;
    height: 3em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

And a demo:

--- jsFiddle DEMO ---

Achieving both multiple lines of text and ellipses appears to be the realm of javascript.

Upvotes: 198

Oriol
Oriol

Reputation: 288010

See http://jsfiddle.net/SWcCt/.

Just set a line-height the half of height:

line-height:20px;
height:40px;

Of course, in order to make text-overflow: ellipsis work you also need:

overflow:hidden;
white-space: pre;

Upvotes: 3

Related Questions