見落としがちなhtmlとcssのヒント_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-24 11:53:15

オリジナル

1092 人が閲覧しました

フロントエンドは簡単だと言っていますが、誰がそんなことを言ったのでしょう。フロントエンドはすぐに習得できますが、先に進むほど習得が難しくなります。私はフロントエンドを学習して約 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;		}

ログイン後にコピー

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