Tips on html and css that are easily overlooked_html/css_WEB-ITnose

They say front-end is easy, who said that. The front-end is quick to learn, but the further you go, the more difficult it becomes to learn. I have been learning front-end for almost a year, and I still find that I don’t know some small knowledge points. These experiential things can never be learned without encountering them.

(1) The logo in front of the title.

Just like the logo in front of this editorial article. I don’t know if you know how this icon is loaded. Anyway, I didn’t know that before. . . If everyone knows, just ignore me. Let me just take notes myself.

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

(2) Specifies that the text in the paragraph shall not be wrapped.

The text you wrote will always be displayed on one line. Just add a css attribute:

white-space: nowrap;

You need to add two attributes:

overflow: hidden;			text-overflow: ellipsis;

The result of combining the above (2) (3) is

The source code is:

<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;		}