zoukankan      html  css  js  c++  java
  • css如何让文字不换行显示?

    在CSS中,可以通过white-space属性来实现文字不换行显示;只要将white-space属性的值为nowrap就可强制文字不换行。

    white-space属性指定元素内的空白怎样处理。它有以下属性值:

    • normal:默认。空白会被浏览器忽略。

    • pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

    • nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

    • pre-wrap:保留空白符序列,但是正常地进行换行。

    • pre-line:合并空白符序列,但是保留换行符。

    示例:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			p {
    				 400px;
    				height: 50px;
    				border: 1px solid red;
    				
    			}
    			.nowrap{
    				white-space: nowrap;
    			}
    		</style>
    	</head>
    
    	<body>
    		<p>普通文本!!!
    			这是一些文本。 这是一些文本。 这是一些文本。
    		</p>
    		<p>强制文字不换行!!!
    			这是一些文本。 这是一些文本。 这是一些文本。
    		</p>
    	</body>
    
    </html>

    效果图:

    white-space属性可和overflow属性、text-overflow属性一起使用,使用文字不换行、超出部分隐藏并显示为省略号、

    示例:

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<style type="text/css">
    			p {
    				 400px;
    				height: 50px;
    				border: 1px solid red;
    				
    			}
    			.nowrap{
    				white-space: nowrap;
    				text-overflow: ellipsis;
    				overflow: hidden;
    			}
    		</style>
    	</head>
    
    	<body>
    		<p>普通文本!!!
    			这是一些文本。 这是一些文本。 这是一些文本。
    		</p>
    		<p>强制文字不换行!!!
    			这是一些文本。 这是一些文本。 这是一些文本。
    		</p>
    	</body>
    
    </html>



  • 相关阅读:
    chrome更新后,恢复本地丢失的书签和历史记录
    redis 集合set 使用 rediscluster 使用交集
    git 删除分支恢复
    SQL语句性能优化
    A调用B,b有事务,a没有
    Unable to tunnel through proxy. Proxy returns "HTTP/1.0 407 Proxy Authentica 问题处理
    fasnjson 转换
    String.format()的详细用法
    传递json
    基础入门-加密编码算法
  • 原文地址:https://www.cnblogs.com/ypppt/p/12868900.html
Copyright © 2011-2022 走看看