web-dev-qa-db-ja.com

1行または2行の後のCSS単語省略記号（ '...'）

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

DIVに1つvery長い単語が含まれている場合"asdasfljashglajksgkjasghklajsghl"のように、次を表示します。

     |asdasfljashglajk...|

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

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

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

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

javascripthtmlcssellipsis
13
user349072

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

white-space: nowrap;
text-overflow: Ellipsis;
6
Prashobh

私は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にクエリを実行しないようにする必要があります。

10
alecs.popa

これを見つけました：

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

-webkit-line-clampは一部のブラウザで機能するようです。

9
Mouscellaneous

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

http://jsfiddle.net/TVVHs/

text-overflow: Ellipsis;onlyはwhite-space: nowrap;で機能し、複数行を防ぎます。

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

4
Alex Wayne

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」のように非常にvery小さいものである場合、最後の単語と重複する可能性があります。

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

3
TbWill4321

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

今のところ、これを見てみることをお勧めします fiddle ！ text-overflow: Ellipsis

3
user2274431

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

  @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/qlFdphttp://caniuse.com/#search=-webkit-line-clamp

2
Julian Tellez

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

  • 容器幅固定時
    .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%;
    }
1
Dilip Nannaware

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

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
}

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

1
Ryan Walton