javascript - 多行文本溢出 (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

score 2 · Accepted Answer

你可以使用弹性

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

score 0 · Accepted Answer

我认为最简单的解决方案是css“文本溢出：省略号”。您可以使用下面的 css 片段来获得所需的结果。

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

注意; 宽度是点的转折点。

score 0 · Accepted Answer

我同意在添加文本溢出之前提供的答案：省略号；即使内容没有溢出，对 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 中添加一个额外的元素（这里是一个跨度）；我希望这可以帮助你。

score 0 · Accepted Answer

您应该设置 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 中的行。它应该适合你。

score 0 · Accepted Answer

        $.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 · Accepted Answer

这是一个防止单词中断的建议- 标记也有变化：

我正在为应用了 dotdotdot 的 div 使用容器-这flexbox确保了两件事：iteminner

一个。inner取内容的宽度

湾。dotdotword-wrap: break-word应用不会断字
现在可以检测何时可能发生断字或溢出- 这将是当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>

score 0 · Accepted Answer

由于您已经在使用 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>

如果您打算更改元素的大小，可以将循环包装在一个函数中，然后在需要时调用它。

score 0 · Accepted Answer

到要显示的元素...应用以下代码

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

您可以将宽度调整为所需的最大值。

javascript - 多行文本溢出 (dotdotdot)：只换行

8 回答 8

Related

Reference