Multiline text overflow (dotdotdot): wrap only word

Question

I have such example of my code:

  <div class="container">
    <div class="item n1">Proe Schugaienz</div>
    <div class="item n2">Proe Schugaienz</div>
  </div>

and i use such jQuery code:

$('.item').dotdotdot({
  wrap: 'word',
  fallbackToLetter: false
})

and css:

.item {
  margin: 5px;
  background: red;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.n1 {
  width: 8px;
}

.n2 {
  width: 80px;
}

but as result i get:

as result i want achieve this:

is it possible with pure css or with dotdotdot.js? if word (sentence) cannot match it's parent: then show only default one-line-text-overflow if word (sentence) is able to fit parent word-by-word - then match it, no letter-hyphenation!

so i don't wanna my container to be extented by height (i have a lot of data, it's only an example, i could not hardcode some blocks)

https://plnkr.co/edit/IxS0CReJicRfDdeGpoPo?p=preview

Try to wrap `span` and `em` by a `div` which has class `.vertically-centered-el` instead of giving that class to each of them. — Alex, Dec 21 '15 at 16:45
[`transforms`](http://caniuse.com/#feat=transforms2d) is supported in `ios 7`. — Alex, Dec 21 '15 at 16:48
you could try using a peusdo element and inline-block: https://jsfiddle.net/6xshcyv8/3/ — Martin, Dec 21 '15 at 16:53
Works partially for me (just CSS): http://codepen.io/anon/pen/gLezqd — Mr. Hugo, Dec 05 '16 at 23:40

score 2 · Answer 1 · answered Dec 21 '15 at 20:53

2

you can use flex

<div class="container">
 <span></span>
 <em></em>
</div>
.container {
   display: flex;
   justify-content: center; /* centers content horizontally*/
   align-items: center /* centers content vertically*/
}

answered Dec 21 '15 at 20:53

dorindo

83
8

score 0 · Answer 2 · answered Nov 30 '16 at 09:53

Here is a proposal that prevents the word break - there are changes in the markup as well:

I'm using flexbox container item for the div inner that has dotdotdot applied - this ensures two things:

a. inner takes the width of the content

b. word-wrap: break-word applied by dotdotdot will not break the word
Now it is possible to detect when word break or overflow can happen - this would be when inner width exceeds item width.

So we can detect this in the callback of dotdotdot! When words starts breaking, you need ellipsis - so replace the text with ... just like dotdotdot does.

See demo below:

$('.inner').dotdotdot({
  wrap: 'word',
  watch: 'window',
  fallbackToLetter: false,
  callback: function(isTruncated) {
    // this detects 'break-word'
    if($(this).outerWidth() > $(this).closest('.item').outerWidth()) {
      $(this).text('...');
    }
  }
});

.item {
  margin: 5px;
  background: red;
  padding: 2px;
  display:flex;
  height: 100px;
}
.n1 {
  width: 12px;
}
.n2 {
  width: 80px;
}
.n3 {
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.dotdotdot/1.7.4/jquery.dotdotdot.js"></script>
<div class="container">
  <div class="item n1">
    <div class="inner">Proe Schugaienz.</div>
  </div>
  <div class="item n2">
    <div class="inner">
      Proe Schugaienz. More text here. More text here. More text here.
    </div>
  </div>
    <div class="item n3">
    <div class="inner">
      Proe Schugaienz. More text here. More text here. More text here.
    </div>
  </div>
</div>

score 0 · Answer 3 · answered Dec 04 '16 at 20:26

You should set display: inline-block; and line-height: 26px; (or any suitable value which you find suitable) to .n1 class and also increase the width to 16px (i.e. enough width to accomodate two letters). So the final css should be as follows:

.item {
  margin: 5px;
  background: red;
  padding: 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.n1 {
  line-height: 26px;
  width: 16px;
}
.n2 {
  width: 80px;
}

Also remove the lines of in script.js which u were using to achieve the same result. It should work for you.

score 0 · Answer 4 · answered Dec 05 '16 at 02:35

I think easiest solution for this is css "text-overflow:elipsis". You can use below css snippet for desired result.

.item.n1 {width: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;}

Note that; width is your turning point for dots.

score 0 · Answer 5 · answered Dec 05 '16 at 03:52

0

To the element you want to show with a ... Apply the following code

.example-element{
max-width: example-width;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

You can adjust the width at the maximum you want.

answered Dec 05 '16 at 03:52

Pratikshya

192
8

score 0 · Answer 6 · answered Dec 05 '16 at 05:59

Since you are already using JS, this is how I would do it without any library/plugin.

const items = document.querySelectorAll('.item')
const log = document.querySelector('#log')

const MIN_WIDTH = 32

// Check if the elements are smaller than the MIN_WIDTH 
// and apply a class to hide the text and show an ellipsis.
for (let item of items) {
  if (item.clientWidth < MIN_WIDTH) {
    item.classList.add('hidden')
  }
}

.item {
  background-color: red;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0.5rem;
  padding: 0.2rem;
}
.n1 {
  width: 1.5rem; // 24px
}
.n2 {
  width: 6rem;
}

/* 
  This will hide the text and display an ellipsis instead
*/
.hidden {
  position: relative;
  white-space: nowrap;
}
.hidden::before {
  content: '...';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: red;
  text-align: center;
}

<div class="container">
  <div class="item n1">Proe Schugaienz</div>
  <div class="item n2">Proe Schugaienz</div>
</div>

If you plan on changing the size of the elements, you can wrap the loop inside a function, and then call it when needed.

score 0 · Answer 7 · answered Dec 05 '16 at 07:17

        $.fn.overflow = function () {
            return this.each(function () {
                if ($(this)[0].scrollWidth > $(this).innerWidth()) {
                    $(this).css('overflow', 'hidden').css('text-overflow', 'ellipsis').css('white-space', 'nowrap').css('min-width', '16px');
                }
            });
        };
        $(function () {
            $('.item').overflow();
        });

        .item {
            margin: 5px;
            background: red;
            padding: 2px;
            overflow: auto;
            word-wrap: break-word;
        }

        .n1 {
            width: 8px;
        }

        .n2 {
            width: 80px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
        <div class="item n1">Proe Schugaienz</div>
        <div class="item n2">Proe Schugaienz</div>
    </div>

score 0 · Answer 8 · answered Dec 05 '16 at 07:26

I agree to the answers provided before adding text-overflow: ellipsis; to the div's does work even if content does not overflow. I believe that you want to add the ellipsis at the beginning of the content which can be achieved by "reverse ellipsis" and without the help of any js code you can achieve this kind of output Here's a plnkr that I have created for you:

https://plnkr.co/edit/TwotVdtGMaTi6SWaQcbO?p=preview

      .box {
    width: 250px;
    border: 1px solid silver;
    padding: 1em;
    margin: 1em 0;
  }

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

  .reverse-ellipsis {
    /* Your move. */
    text-overflow: clip;
    position: relative;
    background-color: #FFF;
  }

  .reverse-ellipsis:before {
    content: '\02026';
    position: absolute;
    z-index: 1;
    left: -1em;
    background-color: inherit;
    padding-left: 1em;
    margin-left: 0.5em;
  }

  .reverse-ellipsis span {
    min-width: 100%;
    position: relative;
    display: inline-block;
    float: right;
    overflow: visible;
    background-color: inherit;
    text-indent: 0.5em;
  }

  .reverse-ellipsis span:before {
    content: '';
    position: absolute;
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: inherit;
    z-index: 200;
    left: -.5em;
  }

  body {
    margin: 1em;
  }

HTML 

      <!DOCTYPE html>
  <html>

  <head>

  <link rel="stylesheet" href="style.css" />

  </head>

  <body>

  <p>The goal would be to add ellipsis on the beginning and show the end of the content. Any idea?</p>
  <div class="box  ellipsis  reverse-ellipsis"><span>Here is some long content that doesn't fit.</span></div>
  <div class="box  ellipsis  reverse-ellipsis"><span>Here is some that does fit.</span></div>
  </body>

  </html>

All you need to do is add an extra element within .reverse-ellipsis (here a span); I hope this might help you.

Multiline text overflow (dotdotdot): wrap only word

8 Answers8