ホームページ > ウェブフロントエンド > htmlチュートリアル > モバイルWeb CSSでtext_html/css_WEB-ITnoseの単行省略・複数行省略を実現

モバイルWeb CSSでtext_html/css_WEB-ITnoseの単行省略・複数行省略を実現

WBOY
リリース: 2016-06-24 11:49:33
オリジナル
1231 人が閲覧しました

単一行の省略:

selector{	text-overflow: ellipsis;/*这就是省略号喽*/		  	overflow: hidden;/*设置超过的隐藏*/	white-space: nowrap;/*设置不断行*/	width:200px;/*设置宽度*/}
ログイン後にコピー

複数行の省略:

ほとんどのモバイル ブラウザは Webkit カーネルを使用するため、-webkit-line-clamp 属性を使用できます。

-webkit-line-clamp は、ブロック要素に表示されるテキストの行数を制限するために使用されます。 この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。

display: -webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するために組み合わせる必要がある属性。

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

selector{	overflow : hidden;	text-overflow: ellipsis;	display: -webkit-box;	-webkit-line-clamp: 2;/*此为两行,设置行数*/	-webkit-box-orient: vertical;/*子元素垂直排列*/}
ログイン後にコピー

注: 省略記号の後に詳細を表示するリンクを追加する場合は、テキストの直後に 詳細を表示 を追加します。


ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート