Home  >  Article  >  Web Front-end  >  HTMLForce not to wrap tag elements

HTMLForce not to wrap tag elements

(*-*)浩
(*-*)浩Original
2019-10-11 16:10:483318browse

In web page layout, such as article list title layout, no matter how much text you want to display in a new line, you need to force the content to be displayed on one line. This can be achieved with the nobr tag.

HTML<nobr>Force not to wrap tag elements

##f44a345470ed5309298c118c07c6efacContent9c46f421c188c45fb09e606d3bbae378

Do not wrap content into f44a345470ed5309298c118c07c6efac with 9c46f421c188c45fb09e606d3bbae378 (Recommended learning:

html tutorial)

nobr tag features:

If you do not encounter the br line break tag , the content is displayed in one line. If the br line break tag is encountered, the content will automatically wrap after adding br line break.

html nobr ban content line wrapping case

If there is a 4-line article title list, set the width to 200px; the css line height is 22px; for the 4-column content, we Adopt ul li list layout, two of them add f44a345470ed5309298c118c07c6efac tags to the content, one li does not add content, and the other li has less content and the width can be displayed.

Full html source code:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>nobr标签实例</title> 
<style> 
ul{ border:1px solid #000; width:200px;} 
li{ width:200px; line-height:22px} 
</style> 
</head> 
<body> 
<ul> 
<li><nobr>第一排内容文字多加nobr标签测试内容</nobr></li> 
<li><nobr>第二排内容文字多加nobr标签不能排下</nobr></li> 
<li>第三排内容文字多没有加nobr标签</li> 
<li>第四排 文字少能排下</li> 
</ul> 
</body> 
</html>

The above is the detailed content of HTMLForce not to wrap tag elements. 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

Related articles

See more