WebKit CSS 拡張機能の効果

今回はWebKitのCSS拡張効果について、WebKitをCSSで利用する場合の注意点について、実際の事例を見ていきましょう。 -webkit-line-clamp はサポートされていない WebKit プロパティです。CSS ドラフト仕様には含まれていませんが、テキスト オーバーフローでこのパラメーターをよく使用します。 -line-clamp はサポートされていない WebKit プロパティであり、CSS ドラフト仕様には含まれていません。

ブロック要素に表示されるテキストの行数を制限します。 この効果を実現するには、他の外部 WebKit プロパティと組み合わせる必要があります。一般的に結合される属性:

display: -webkit-box; オブジェクトを柔軟な

ボックス モデル

として表示するために結合する必要がある属性。

-webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。

• text-overflow
は、複数行のテキストの場合に、範囲外のテキストを省略記号「...」で隠すために使用できます。
• 構文:

  -webkit-line-clamp:

  適用対象: ブロック要素
アニメーション: いいえ

計算値: 指定された値

値: :

ブロック要素によって表示されるテキストの行数。

* CSS3 の新しい属性には記述ミスや変更がある可能性があります。これらは参照用であり、継続的に更新されます。 code


overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;

-webkit-box-orient:vertical;

ラベルが英語では、英語は自動的に折り返されないため、次のコードを追加して自動的に折り返す必要があります

word-wrap:break-word;word-break:break-all;

プラグインを使用することもできます-ins

clamp.js

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

テキストテクスチャオーバーレイを実装するフロントエンドテクノロジー

h5は複数の画像プレビューアップロードとクリック可能なドラッグコントロールを実装

H5でのAPP監視リターンイベント処理

以上がWebKit CSS 拡張機能の効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。