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"/>

Shortcut icon should be written after this rel, which means that this is the logo image of the title. If it is a style sheet, you need to write stylesheets.

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

(3) If the text in the text box overflows, use ellipsis to indicate the remaining part.

You need to add two attributes:

overflow: hidden;			text-overflow: ellipsis;

text-overflow means text overflow.

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

I encountered so many temporarily this time. This article will be continuously updated. When I come across some tidbits of knowledge that I find relatively unpopular, I write them down. Just think of it as me taking notes