Five useful CSS attributes were overlooked by me

The article comes from the public number: front-end bottle King author | T he translator of Desir? | S ubenru, responsible for the | G uo Wei produced | CSDN（ID：CSDNnews）

Hello, everyone! T oday, I'd like to share with you some CSS attributes that I learned about very late, and no one told me about their existence until then. M aybe you, unlike me, already know these attributes. Gossip less, let's get to the point:

1. Disables the text of an element that the user selects

Using the property user-select and setting its value to none we can set the text of an element to not be selected by the user.

element {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
}

You can use this property when you do not want the original content of an element to be copied.

2. Change the background color of the selected Chinese book

Using selector ::selection you can change the background color of the selected Chinese book:

::selection {
  color: #ececec;
  background: #222831;
}

When you use this property, be careful to use a good combination of color contrast.

3. Wrap the text without using br

Use the property white-space and set its value to pre-wrap or pre-line

element {
  white-space: pre-wrap; /*pre-wrap*/
  white-space: pre-line; /*pre-line*/
}

4. Set the spacing between words

It may be a little simple for you. But I didn't know this setting until I searched for this requirement.

You can use word-spacing property to set the interval between words in text.

element {
  word-spacing: 6px; /* word spacing wow such */
}

5. Hide ugly scroll bars in your browser

I didn't even know it could be done.

To do this, you must prepare different code for different browsers:

/* Hide scrollbar for Chrome, Safari, and Opera */
html::-webkit-scrollbar {
  display: none;
}


/* Hide scrollbar for IE and Edge */
html {
  -ms-overflow-style: none;
}

If you disable the scroll bar, then you need to make sure that the up/down buttons and other convenient navigation options are available. Note that Firefox stopped supporting scroll bar hiding issues, and the above code seems to be a trick to perform the same functionality as the other code I've included.

Here's a description of the five useful CSS attributes that I ignored by W3Cschool编程狮 which I hope will help you.