Home  >  Article  >  Web Front-end  >  How to set blank padding within text elements in css?

How to set blank padding within text elements in css?

青灯夜游
青灯夜游Original
2018-11-01 18:20:535678browse

How to set the blank padding within text elements in css? What this article brings to you is to introduce the method of setting blank filling in text elements using css. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What I will introduce to you today is to set the blank filling within text elements through the white-space property of css. Let's take a look at the white-space attribute.

The white-space attribute controls how text is processed on the element it is applied to, setting how to handle whitespace within the element.

Below we create such an html:

<div>
   A bunch of words you see.
</div>

Set the width of the div to 100px. At a reasonable font size, add more text to fit 100px. Doesn't do anything, the default white-space value is normal and the text will wrap.

div {
  white-space: normal; 
}

Let’s take a look at the rendering:

How to set blank padding within text elements in css?

If you want to prevent text from wrapping, you can use white-space: nowrap;

How to set blank padding within text elements in css?

Please note: In the html code example at the top of this article, there are actually two line breaks, one before the text line and one after the text line, that allow the text on its own line (in the code). When the text is rendered in the browser, it's like these line breaks are removed. Also stripped are the extra spaces before the first letter. If we want to force the browser to display those newlines and extra white-space characters we can use white-space: pre;

How to set blank padding within text elements in css?

pre is called Because this behaves as if you wrapped the text in a

 tag (pre tags can handle whitespace and newlines by default). In HTML, whitespace is perfectly fine, text is not wrapped until the closing tag appears in the code. This is particularly useful when displaying code literally, to gain aesthetic benefit from certain formatting (and when certain times are absolutely critical, as in languages ​​that rely on white space!) 

Maybe you like how the pre handles whitespace and line breaks, but you need to wrap the text instead of potentially breaking from its parent container. That's white-space: pre-wrap;:

How to set blank padding within text elements in css?

Finally, white-space: pre-line; will break the line where the code breaks, but will still strip off the extra whitespace area.

How to set blank padding within text elements in css?

Interestingly, the newline at the end is not respected. According to the CSS 2.1 spec: "Break lines at preserved newlines, filling line boxes as necessary." So maybe that makes sense.

Here's a table to understand the behavior of all the different values:

How to set blank padding within text elements in css?

In CSS3, the white-space property will actually follow that chart and will Properties map to text-space-collapse and text-wrap accordingly.

Compatibility

The numbers in the table indicate the first browser version number that supports this attribute.

How to set blank padding within text elements in css?

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study.

The above is the detailed content of How to set blank padding within text elements in css?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn