16

CSSを使用してJavaScriptでワードラップを作成しようとしていますが、条件は次のとおりです。

DIVに「asdasfljashglajksgkjasghklajsghl」などの非常に長い単語が1つ含まれている場合は、次のように表示します。

     |asdasfljashglajk...|

DIVに「できないと言われるたびにダイムがあった場合」などの長い文が含まれている場合は、次のように表示します。

     |if i had a dime for|
     |everytime i was... |

私はHTML、CSS、JavaScriptを使用しています。jQueryが使えません。

可能であれば教えてください。

4

9 に答える 9

9

これを見つけました：

http://codepen.io/martinwolf/pen/qlFdp

-webkit-line-clamp一部のブラウザで動作するようです。

于 2014-06-12T13:54:55.363 に答える
8

私はanwserに少し遅れていることを知っていますが、それを伴うコードを書いただけです。

    if ($('your selector').height() > 50) {
        var words = $('your selector').html().split(/\s+/);
        words.push('...');

        do {
            words.splice(-2, 1);
            $('your selector').html( words.join(' ') );
        } while($('your selector').height() > 50);
    }

もちろん、jQueryセレクターを変数に保存して、毎回DOMにクエリを実行しないようにする必要があります。

于 2013-05-07T13:58:33.377 に答える
7

このために、text-overflow: ellipsis;プロパティを使用できます。このように書く

white-space: nowrap;
text-overflow: ellipsis;
于 2012-07-26T08:31:22.133 に答える
4

悲しいことに、CSSだけではできないと思います。

http://jsfiddle.net/TVVHs/

text-overflow: ellipsis; white-space: nowrap;複数行を防ぐ場合にのみ機能します。

おそらく、要素の高さが許容できるまで単語を切り刻み続けるクレイジーなjavascriptソリューションがありますが、それは遅く、かなり厄介です。

于 2012-07-26T08:37:26.220 に答える
3

jQueryの使用が許可されると、このリンクにdotdotdotプラグインが表示されます。使用は非常に簡単で、うまく機能します。

今のところ、このフィドルを見てみることをお勧めします！うまくいくだろうtext-overflow: ellipsis

于 2013-05-07T14:14:18.900 に答える
3

CSSをいじって「次善の」CSSONLYソリューションを考え出した後、私はこれを思いつきました。

p.excerpt { position: relative; height: 63px; line-height: 21px; overflow-y: hidden; }
p.excerpt:after { content: '...'; position: absolute; right: 0; bottom: 0; }

これは常に少なくとも3行のテキストがあることを前提としており、それにはいくつかの問題があります。4行目に折り返す最後の単語が非常に長い場合、最後の単語と省略記号の間に異常に大きな空白があります。同様に、 「a」のように非常に小さいものであれば、最後の単語と重なる可能性があります。

別のコンテナを追加して、の外に省略記号を付けることができpます。少しコメントを調整することで、誰かがもっと良いものをいじくりまわすと確信しています。

于 2013-08-18T08:19:00.710 に答える
2

これがあなたの質問に答えることを願っています

  @mixin multilineEllipsis(
  $lines-to-show: 2,
  $width: 100%,
  $font-size: $fontSize-base,
  $line-height: 1.6) {

  display: block; /* Fallback for non-webkit */
  display: -webkit-box;
  max-width: $width;
  height: $font-size * $line-height * $lines-to-show; /* Fallback for non-webkit */
  font-size: $font-size;
  -webkit-line-clamp: $lines-to-show;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

http://codepen.io/martinwolf/pen/qlFdp http://caniuse.com/#search=-webkit-line-clamp

于 2016-08-18T15:08:19.313 に答える
1

コンテンツが実行されることを保証できる場合は、これが私が思いついた解決策です。それは私のサイトで機能し、シンプルにしたかったのです。

html：

<p class="snippet">
   [content]
</p>

css：

.snippet {
    position: relative;
    height: 40px; // for 2 lines
    font-size: 14px; // standard site text-size
    line-height: 1.42857; // standard site line-height
    overflow: hidden;
    margin-bottom: 0;
}
.news-insights .snippet:after {
    content: "\02026";
    position: absolute;
    top: 19px;
    right: 0;
    padding-left: 5px;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 20%, white); // use vendor prefixes for production code
}

次に、パディングと背景のグラデーションを試して、よりスタイリッシュなプレゼンテーションを作成できます。

于 2015-07-22T17:20:56.583 に答える
1

コンテナの幅とパーセンテージが固定されている場合、省略記号の表示は別の方法で処理する必要があります。

  • 容器幅固定時

    .nooverflow{
        display: inline-block;
        overflow: hidden;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

  • コンテナの幅がパーセンテージまたは自動の場合、このシナリオでは、そのコンテナに別のタグを定義してテキストをレンダリングし、幅を0、最小幅を100％と指定します。これにより、コンテナの幅が取得され、省略記号が表示されます。使用するLESSクラスは次のとおりです。

    .nooverflow{
        display: inline-block;
        overflow: hidden!important;
        overflow-wrap: normal;
        text-overflow: ellipsis;
        white-space: nowrap!important;
        width: 0;
        min-width: 100%;
    }

于 2016-09-26T22:58:16.217 に答える