多行文本溢出（dotdotdot）：僅包裝單詞

Question

我有我的代碼的例子：

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

我使用這樣的jQuery代碼：

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

和css：

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

.n1 {
  width: 8px;
}

.n2 {
  width: 80px;
}

但結果我得到：

結果我想實現這個：

是純粹的CSS還是dotdotdot.js？ 如果單詞（句子）不匹配它的父級：那么只顯示默認的單行文本溢出，如果單詞（句子）能夠逐字適合父 - 然后匹配它，沒有字母連字符！

所以我不希望我的容器被高度擴展（我有很多數據，它只是一個例子，我不能硬編碼一些塊）

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

Answer 1

你可以使用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

這是一個阻止單詞中斷的提議 - 標記也有變化：

1. 我正在使用flexbox容器item為div inner應用了dotdotdot - 這確保了兩件事：

   一種。 inner取內容的寬度

   灣 word-wrap: break-word dotdotdot應用的word-wrap: break-word不會破壞這個詞

2. 現在可以檢測到單詞中斷或溢出何時發生 - 這可能是inner寬度超過item寬度時。

   所以我們可以在dotdotdot的回調中檢測到這一點 ！ 當單詞開始破壞時，你需要省略號 - 所以用...替換文本就像dotdotdot那樣。

見下面的演示：

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

你應該設置display：inline-block; 和行高：26px; （或您認為合適的任何合適的值）到.n1類，並將寬度增加到16px（即足夠寬度以容納兩個字母）。 所以最終的css應如下：

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

同時刪除你用來實現相同結果的script.js中的行。 它應該適合你。

Answer 4

我認為最簡單的解決方案是css“text-overflow：elipsis”。 您可以使用下面的css片段獲得所需的結果。

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

注意; 寬度是點的轉折點。

Answer 5

要使用...顯示的元素應用以下代碼

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

您可以根據需要調整寬度。

Answer 6

由於您已經在使用JS，因此我將在沒有任何庫/插件的情況下執行此操作。

 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> 

如果您打算更改元素的大小，可以將循環包裝在函數中，然后在需要時調用它。

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

我同意在添加文本溢出之前提供的答案：省略號; 即使內容沒有溢出，div也能正常工作。 我相信你想在內容的開頭添加省略號，這可以通過“反向省略號”來實現，沒有任何js代碼的幫助你可以實現這種輸出這里是我為你創建的一個plnkr：

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>

您需要做的就是在.reverse-ellipsis（這里是一個span）中添加一個額外的元素; 我希望這對你有幫助。