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で可能ですか? 単語 (文) がその親と一致できない場合: 単語 (文) が親の単語ごとに一致する場合は、デフォルトの 1 行のテキストオーバーフローのみを表示します - その後、一致し、文字ハイフネーションはありません!

そのため、コンテナを高さで拡張したくありません（大量のデータがあります。これは単なる例です。一部のブロックをハードコーディングできませんでした）

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

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

text-overflow: ellipsis; を追加する前に提供された回答に同意します。コンテンツがオーバーフローしていなくても、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

単語の区切りを防ぐ提案を次に示します。マークアップにも変更があります。

dotdotdotが適用された div のflexboxコンテナーを使用しています。これにより、次の 2 つのことが保証されます。iteminner

を。innerコンテンツの幅を取ります

b. dotdotdotword-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

これに対する最も簡単な解決策は、css "text-overflow:elipsis" だと思います。以下の CSS スニペットを使用して、目的の結果を得ることができます。

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

ご了承ください; 幅は、ドットのターニングポイントです。

javascript - 複数行テキスト オーバーフロー (dotdotdot): 単語のみを折り返す

8 に答える 8

Related

Reference

javascript - 複数行テキストオーバーフロー (dotdotdot): 単語のみを折り返す