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>



  • 相关阅读:
    闪回flashback
    Oracle数据文件在open状态被删除的恢复记录
    从浅到深掌握Oracle的锁
    Oracle 11g 11201_RHEL5.5_RAC_VBOX 详细搭建步骤
    AWR Report 关键参数详细分析
    16、Xtrabackup备份与恢复
    17、percona-toolkit
    插入排序
    选择排序
    冒泡排序
  • 原文地址:https://www.cnblogs.com/ypppt/p/12868900.html
Copyright © 2011-2022 走看看