BinaryDevelop
  1. ホーム
  2. Web制作
  3. CSS

[css3]テキストタイポグラフィのためのCSS3テキストオーバーフローソリューション

2022-02-03 01:07:58

基本的な構文
text-overflow は hight,over-flow:hidden;white-space:nowrap; 属性と組み合わせて使用します。

text-overflow: clip;ellipsis;string。
クリップ：表示せずに直接隠す
楕円：オーバーフローテキストを表現するために...3つのドットを使用する（共通）
文字列：カスタマイズ可能な記号で、収まりきらない文字を表現します。 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.tf{
			width: 100px;
			height:50px;
			border:1px solid black;
			overflow: hidden;
			text-overflow: clip;/*If it's simply hidden, the effect is the same with or without this phrase height+overflow will hide the overflow text directly*/
		}
		.tf1{
			width: 100px;
			border:1px solid black;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-text-overflow: ellipsis;
			white-space: nowrap;
			/* If you use the ellipsis property     
				text-overflow:ellipsis; overflow: hidden; white-space: nowrap;
			 One of these three attributes is missing
			*/
		}
	</style>
</head>
<body>
	<div class="tf">
		
	</div>

	<div class="tf1">
		Script House Script House Script House Script House Script House Script House Script House.
	</div>

	
</body>
</html>

今回の記事は、テキストレイアウトのCSS3テキストオーバーフロー対策についてです。CSS3のテキストレイアウトについては、Script Houseの過去記事を検索していただくか、引き続き以下の関連記事をご覧ください。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します