CSSでオーバーフローと改行なしを設定する方法

CSS でオーバーフローと改行なしを設定する方法: 最初に HTML サンプル ファイルを作成し、次に div を定義し、最後に「overflow: hidden;text-overflow:ellipsis;」などの CSS スタイルを設定します。オーバーフローと改行なしの効果を実現します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

CSS で行折り返しを行わずにオーバーフローを設定するにはどうすればよいですか?

css テキスト オーバーフローは折り返されず、省略記号が表示されます

単一行のテキスト オーバーフロー;

幅を設定します。テキスト オーバーフローを超える場合は、省略記号が表示されます。表示;

div{
width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;
}

複数行テキスト オーバーフロー;

は、WebKit の CSS 拡張属性を使用します。この方法は、WebKit ブラウザーおよびモバイル端末に適しています;

注:

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

2.display: -webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するには、結合する必要があります。

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

div{
display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;
}

まだ Webkit ブラウザではありません~~

推奨される学習: 「css ビデオ チュートリアル 」

以上がCSSでオーバーフローと改行なしを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。