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

Answer 1

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*/
}

Answer 2

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

1. 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

2. 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> 

Answer 3

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 (ie 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.

Answer 4

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.

Answer 5

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.

Answer 6

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.

Answer 7

  $.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> 

Answer 8

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.