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

这是阻止分词的提案 - 标记也有变化：

我使用flexbox容器item为已应用 dotdotdot 的div inner - 这确保了两件事：

一个。 inner获取内容的宽度

湾 dotdotdot 应用的word-wrap: break-word不会破坏
现在可以检测单词中断或溢出何时发生 - 这可能是inner宽度超过item时宽度。

因此我们可以在 dotdotdot 的回调中检测到这一点！单词开始破解时，您需要省略号 - 所以将文本替换为...，就像 dotdotdot 那样。

见下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

我同意在添加文本溢出之前提供的答案：省略号;即使内容没有溢出，div也能正常工作。我相信你想在内容的开头添加省略号，这可以通过＆＃34;反向省略号＆＃34;没有任何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（这里是一个范围）中添加一个额外的元素;我希望这对你有帮助。

多行文本溢出（dotdotdot）：仅包装单词

7 个答案: