在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 {

				width: 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 {

				width: 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>

css如何让文字不换行显示？的更多相关文章

  1. CSS样式 解决文字过长显示省略号问题

    一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题. <!D ...

  2. CSS+DIV实现文字一行内显示，并且过多的文字以点来代替

    有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...

  3. css+div解决文字溢出控制显示字数

    一.一般的文字截断(适用于内联与块):  Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...

  4. CSS学习笔记：文本换行显示（word-wrap）

    在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. ...

  5. CSS样式中文字的换行

    在我们做输出时可能会遇到这样一个问题,就是汉字和英文字母相遇,然后自动换行的问题.例如,当我在输出产品标题时,由于产品名称比较长,包括汉字和英文字母,FF下浏览是正常的,而IE下面 英文会出现换行.当 ...

  6. css实现页面文字不换行、自动换行、强制换行

    强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...

  7. css纯字母或者字母换行显示

    white-space:normal; word-break:break-all;

  8. EasyUIDataGrid列标题换行显示

    有时候表格标题字数太多,而宽度有限,就会导致一部分列的标题显示不出来 这时候,加入如下css代码即可将标题换行显示 .datagrid-header-row .datagrid-cell span { ...

  9. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

随机推荐

  1. 纯正中文版本pi-star系统下载

    基于3.4.17修改(稳定,发热量少) 不支持RPI 4 a/b+ 完美支持树莓派0,1,2,3 默认刷好卡,启动已经设置好所有参数(选好TFT屏幕,调制解调器类型GPIO,打开了DMR服务器(460 ...

  2. NodeJS及路由

    1.基本介绍- http://nodejs.cn/api/ Node.js 是一个基于Chrome V8 引擎的JavaScript运行环境 Node.js使用了一个事件驱动.非阻塞式I/O的模型,使 ...

  3. 从程序员到项目主管再到项目总监，一个IT从业者三个职业生涯阶段的工作生活日常

    这是王不留的第 8 篇原创文章 前段时间写过<王不留的十多年工作和生活的流水帐>,在知乎.简书,还有不少微信的朋友私信问我每天四点钟是如何做到的?你现在的作息时间是怎么安排的? 于是,我将 ...

  4. 案例：DG主库未设置force logging导致备库坏块

    DG搭建时,官方文档手册有明确提到要设置数据库为force_logging,防止有nologging操作日志记录不全导致备库应用时出现问题. 虽然是老生常谈的安装规范,但现实中总会遇到不遵守规范的场景 ...

  5. 对Activity启动模式的理解

    对Activity启动模式的理解 应用场景 在已打开多个Activity应用B的前提下,应用A调用应用B后点击返回按钮,需要直接返回到A应用,而不是打开B应用的上一个Activity 一个Task可以 ...

  6. 多态的C语言实现版本

    #ifndef _51_2_H #define _51_2_H typedef void Demo; typedef void Derived; Demo* Demo_create(int i,int ...

  7. 防止暴力破解-DenyHosts应用

    当你的linux服务器暴露在互联网之中,该服务器将会遭到互联网上的扫描软件进行扫描,并试图猜测SSH登录口令.   你会发现,每天会有多条SSH登录失败纪录.那些扫描工具将对你的服务器构成威胁,你必须 ...

  8. Chrome扩展移植到Edge浏览器教程

    微软在推出Edge浏览器之初,就把能够使用扩展(extension)作为一个重要功能.在Win10一周年更新版(1607)中,这项功能正式向广大用户推出(当然,Insider用户早就测试了一段时间了) ...

  9. sublime Text3 实现2:1:1三分屏效果

    小trick, 水一篇博客 先上效果图 由于写题啥的时候需要重定向输入输出改数据对拍, 设置成这样的效果就非常直观的看数据 直接切题, 首选项--快捷键--default里搜索alt+shift+1( ...

  10. NAT网络地址转化和DHCP

    DHCP(Dynamic Host Configuration Protocol,动态主机配置协议)通常被应用在大型的局域网络环境中,主要作用是集中的管理.分配IP地址,使网络环境中的主机动态的获得I ...