コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 純粋な CSS を使用してテキスト省略をカスタマイズする方法の完全なリスト

純粋な CSS を使用してテキスト省略をカスタマイズする方法の完全なリスト

小云云
リリース： 2017-12-09 10:36:46
オリジナル
1863 人が閲覧しました

この記事では主に純粋な CSS でテキスト省略をカスタマイズする完全な方法を紹介します。編集者はそれが非常に優れていると考えたので、今すぐ共有して参考にします。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

WeTest の紹介

Design MM からデザイン ドラフトを受け取りました。ああ、いや、少ししてからさらにコンテンツを追加し始めました。とても小さいスペースなので、大変な作業です。 ！私たちの UI 開発 GG がいつも、Weichen がそれをやっていない、それができないだけだと心から言っているのが残念です。とても罪深い。でも今は、カスタマイズした多行省略を使ってから、腰も痛くならなくなり、手も痛くなくなり、リクエストにも楽に答えられるようになりました！

1. 複数行省略とは何ですか?

単語数が一定レベルに達すると、省略記号が表示されます。最初は単純な点、点、点でしたが、その後はトリックが増え、点点プラス下矢印、点点追加、点点追加プラス矢印...複数行の省略は、テキストの長い段落の後の派手なドットです。

ユーザーは次の操作を行います:

1. Google Plus は、透明から白へのグラデーション マスクを使用しますが、テキストがそれを超える場合にのみ表示されますが、テキストを押し出すことはできず、背景のみを表示できます。単色なので理想的ではありません。

2. Wandoujia は、行の折り返しを表示する際に、テキストが...xxx を超えない場合でも表示されますが、これはさらに理想的ではありません。

私たちはこれを行います:

QQ ブラウザー ページでオリジナルの mod-more UI コンポーネントを使用して、カスタマイズされた複数行の省略を実現します。これは依然として純粋な CSS であり、以下のような同等のコンポーネントよりもはるかに先を行っています。 ！いいぞ！いいぞ！残念ながら、mod-more コンポーネントの高さは固定されています。モッドモアのさらなる進化、完璧な適応高さ、コードが簡素化され使いやすくなりました。

2.どうやって行うのですか？

カスタマイズされた複数行の省略 = オンデマンドで表示...詳細 + テキスト オーバーフローの切り捨て、オンデマンドで表示...詳細は、フローティング機能で実装されています。テキスト オーバーフロー ステージでは、プレフローティングおよび行クランプを使用できます。実装では、QQ ブラウザの既存のソリューションはフロントフローティングですが、高さが固定されているという欠点があります。ラインクランプを使用すると、高さに合わせて調整できます。スペースの制限のため、ここでは QQ ブラウザの実装計画のみを説明します。次の段階でこの計画にアップグレードされます。

原理を詳しく解説！

オンデマンドで表示...もっと見る

<!doctype html>
<html>
<body>
<style>
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<p style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<p style="float:right;margin-left: -50px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);">
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
</p>
<p style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</p>
<p style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);">...更多</p>
</p>
</body>
</html>
ログイン後にコピー

右フローティングの原則を使用します - 右フローティング要素は右から左の順に配置され、十分なスペースがない場合は折り返されます。青色のブロック、ピンク色のブロック、オレンジ色のブロックが順に右に移動し、青色のブロックの高さがテキスト 6 行よりも小さい場合はオレンジ色のブロックが右側に表示されます。 6 行のテキスト、左下隅はオレンジ色のブロックを配置するのに十分なスペースなので、オレンジ色のブロックが左側にあります

<!doctype html>
<html>
<body>
<style>
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<p style="font-size:12px;line-height: 18px;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<p style="float:right;margin-left: -50px;width:100%;position:relative;background: hsla(229, 100%, 75%, 0.5);">
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
</p>
<p style="float:right;position:relative;width:50px;height: 108px;color:transparent;background: hsla(334, 100%, 75%, 0.5);">placeholder</p>
<p style="float:right;width:50px;height:18px;position: relative;background: hsla(27, 100%, 75%, 0.5);left: 100%;-webkit-transform: translate(-100%,-100%);">...更多</p>
</p>
</body>
</html>
ログイン後にコピー

オレンジ色のブロックをさらにオフセットして正しい位置に配置します位置を決めて完了です。注意深い生徒は、グラデーションベースのオレンジ色のブロックを追加することが Google Plus で使用される解決策であることに気づくでしょう。

テキスト オーバーフローの切り捨て

<!DOCTYPE html>
<html>
<body>
<style>
@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
</style>
<p style="font-size: 12px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<p style="color:#000;display: inline;vertical-align: top;background: rgb(204, 204, 204);">
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</p>
</p>
</body>
</html>
ログイン後にコピー

-webkit-line-clamp は Webkit カーネルのプライベート CSS 属性で、複数行の省略に使用され、Android と iOS で完全にサポートされています。ただし、楕円を固定的に使用するため、直接展開することはできません。また、コンテナーの高さに応じて動作するオーバーフロー切り捨てロジックが付属しています。注意して検査すると、使用されている省略記号が 1 文字であることがわかります。これは、フォント サイズ、文字間隔、色などのテキスト CSS 属性を使用して制御できます。 

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*测试*/</style>
<p style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: red;line-height: 18px;position: relative;-webkit-animation: width-change 8s ease infinite;background: rgb(230, 230, 230);">
<p style="color:#000;display: inline;font-size: 12px;vertical-align: top;letter-spacing: 0;background: rgb(204, 204, 204);">
腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
</p>
</p>
</body>
</html>
ログイン後にコピー

外側のコンテナのフォントサイズ、文字間隔、色を設定し、サブコンテナに復元して楕円を個別に設定します。ここで、外側のコンテナに設定されている font-size の値は、行の高さの 2 倍に等しくなります (拡張される残りの幅は、letter-spacing によって補うことも、font-size のみを使用して全体の幅を拡張することもできます) ) 色が透明の場合、ラインクランプを使用できます。これにより、コンテナの高さを切り落とすことなくテキストが押し出され、デフォルトの 6 行ではなく 7 行に達し、必要なオーバーフロー切り詰め効果が実現されます。

ぴったり！カスタマイズされた複数行の省略

<!DOCTYPE html><html><body>
<style>@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}/*测试*/</style>
<p style="position: relative;line-height:18px;-webkit-animation: width-change 8s ease infinite;max-height: 108px;">
    <p style="font-size: 36px;letter-spacing: 28px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 6;color: transparent;line-height: 18px;position: relative;">
        <p style="font-size:12px;color: #000;display: inline;vertical-align: top;letter-spacing: 0;">
        腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。
        </p>
        <p style="position:absolute;top: 0;left: 50%;width: 100%;height: 100%;letter-spacing: 0;color: #000;font-size: 12px;background: rgba(173, 216, 230, 0.5);">
            <p style="float: right;width: 50%;height: 100%;background: rgba(255, 192, 203, 0.5);"></p>
            <p style="float: right;width: 50%;height: 108px;background: hsla(223, 100%, 50%, 0.19);"></p>
            <p style="float: right;width: 50px;height: 18px;position: relative;background: rgba(255, 165, 0, 0.5);" class="">... 更多</p>
        </p>
    </p>
</p>   
</body></html>
ログイン後にコピー

将-webkit-line-clamp实现的文字溢出截断代码为主体，叠加绝对定位同步的按需显示...更多结构。因为绝对定位，这里使用百分比简化代码。最外包一层结构限制最大高度。

<!DOCTYPE html><html><body>
<style>
/*
 * 行高 h
 * 最大行数 n
 * ...更多容器的宽 w
 * 字号 f
 */

@-webkit-keyframes width-change {0%,100%{width: 320px} 50%{width:260px}}
.ellipsis {
    position: relative;
    background: rgb(230, 230, 230);
    width: 260px;
    max-height: 108px; /* h*n */
    line-height: 18px; /* h */
    overflow: hidden;
    -webkit-animation: width-change 8s ease infinite;
}
.ellipsis-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6; /* n */
    font-size: 50px; /* w */
    color: transparent;
}
.ellipsis-content {
    color: #000;
    display: inline;
    vertical-align: top;
    font-size: 12px; /* f */
}
.ellipsis-ghost {
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
}
.ellipsis-ghost:before {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
}
.ellipsis-placeholder {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 108px; /* h*n */
}
.ellipsis-more {
    position: relative;
    float: right;
    font-size: 12px; /* f */
    width: 50px; /* w */
    height: 18px; /* h */
    margin-top: -18px; /* -h */
}
</style>
<p class="ellipsis">
    <p class="ellipsis-container">
        <p class="ellipsis-content">
 腾讯成立于1998年11月，是目前中国领先的互联网增值服务提供商之一。成立10多年来，腾讯一直秉承“一切以用户价值为依归”的经营理念，为亿级海量用户提供稳定优质的各类服务，始终处于稳健发展状态。2004年6月16日，腾讯控股有限公司在香港联交所主板公开上市(股票代号700)。</p>
        <p class="ellipsis-ghost">
            <p class="ellipsis-placeholder"></p>
            <p class="ellipsis-more">...更多</p>
        </p>
    </p>
</p>   
</body></html>
ログイン後にコピー

将橙色块偏移到正确位置，梳理了下代码，最终实现了自适应高度的定制多行省略，完美！从此妈妈再也不担心我在省略号后面加东西改东西了！恭喜你击败99%的同行了！

 三、为什么这么做？

line-clamp有3宗罪

和 text-align:justify 一起用会使省略号和文字相叠

 

 超出截断后会截掉部分行高

 

 省略号出现在单词中间 

定制省略当然某问题啦

ext-align:justify时如期所示，没问题！

 

截断时如期所示，也没问题！

 

省略号在有单词时如期显示，依然没问题！

更别说点点点花样增改


简单增改文字加链接只是小case

 

用折角还是其他图片表示文本溢出可以增添趣味

 

溢出时显示溢出字数增加了实用用途

相关推荐：

纯 CSS3 效果资源收集整理

详解css加载会造成阻塞吗

六种CSS经典三栏布局方案

以上が純粋な CSS を使用してテキスト省略をカスタマイズする方法の完全なリストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css 百科事典
ソース：php.cn
前の記事：CSS で単語を画像に置き換える 9 つの方法についての簡単な説明 次の記事：CSS に BFC が隠されている
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1335
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...
から 2024-04-06 20:45:26
0
2
386
他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...
から 2024-04-06 20:41:51
0
1
518
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート