見落としがちなhtmlとcssのヒント_html/css_WEB-ITnose

フロントエンドは簡単だと言っていますが、誰がそんなことを言ったのでしょう。フロントエンドはすぐに習得できますが、先に進むほど習得が難しくなります。私はフロントエンドを学習して約 1 年になりますが、まだ細かい知識を知らないことがいくつかあります。こうした経験的なことは、実際に遭遇しなければ決して学ぶことはできません。

(1) タイトルの前のロゴ。

この編集記事の前にあるロゴのように。このアイコンがどのようにロードされるか知っているかどうかはわかりません。とにかく、それまで知りませんでした。 。 。みんなが知っているなら、無視してください。自分でメモを取らせてください。

<link rel="shortcut icon" href="./flappyBird/bird.png"/>

このrelの後にショートカットアイコンが書かれているはずです。これは、これがタイトルのロゴ画像であることを意味します。スタイルシートの場合はスタイルシートを記述する必要があります。

(2) 段落内のテキストが折り返されないことを指定します。

書いたテキストは常に 1 行で表示されます。 CSS 属性を追加するだけです:

white-space: nowrap;

(3) テキスト ボックス内のテキストがはみ出す場合は、省略記号を使用して残りの部分を示します。

2 つの属性を追加する必要があります:

overflow: hidden;			text-overflow: ellipsis;

text-overflow はテキスト オーバーフローを意味します。

上記の(2)(3)を組み合わせた効果は

ソースコードは次のとおりです:

<div class="test">Hello everybody I'm WesternRanger,welcome to Peking!</div>

.test{			border:#999 solid 1px;			width:200px;			height:30px;			font-weight: 700;			line-height: 30px;			overflow: hidden;			text-overflow: ellipsis;			white-space: nowrap;		}

今回は一時的にたくさん遭遇しました。この記事は継続的に更新されます。比較的人気がないと思われる豆知識を見つけたら、書き留めます。私がメモを取っていると考えてください