Get the App
SLTechnology News&Howtos  ›  Development  › 

How to keep fonts from wrapping in css3

Shulou Source: shulou.com Published: 2022-06-01 02:34:16 10月03日 Update

This article mainly introduces the relevant knowledge of "css3 how to make fonts not change lines". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "css3 how to make fonts not change lines" can help you solve the problem.

In css3, you can use the "white-space" attribute to make the font not wrap, which is used to handle white space within the element. When the attribute value is set to "nowrap," the font text does not wrap and continues on the same line until it encounters a newline tag. The syntax is "white-space:nowrap."

Operating environment of this tutorial: Windows 10 system, CSS3 && HTML5 version, Dell G3 computer.

CSS3 how to make font not new line

In css, you can use white-space to force text not to wrap; usually we use white-space:nowrap to force text content not to wrap, and the text will appear on the same line until it is encountered

label.

The white-space property sets or retrieves how text within an object is displayed.

Grammar:

white-space : normal | nowrap;

Attribute Value:

normal: default. White space is ignored by browsers.

nowrap: Text does not wrap, text continues on the same line until it is encountered

label.

Examples:

div {width: 120px;height: 60px;line-height: 20px;border: 1px dashed #ccc;margin: 10px;}.demo {white-space: nowrap} Content will not be wrapped Content will be forced to appear complete in one line

Effect drawing:

About "css3 how to make fonts do not newline" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.

Tags: Font attribute line content text label knowledge mandatory blank industry grammar different practical element practical practical object effect effect tutorial Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno macOS Redmi Shulou Information vpn NVidia