在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. Java实现 洛谷 P1422 小玉家的电费

    import java.util.*; public class Main { public static void main(String[] args) { Scanner in = new Sc ...

  2. java实现漏掉的账目明细

    某财务部门结账时发现总金额不对头.很可能是从明细上漏掉了某1笔或几笔.如果已知明细账目清单,能通过编程找到漏掉的是哪1笔或几笔吗? 如果有多种可能,则输出所有可能的情况. 我们规定:用户输入的第一行是 ...

  3. java实现第三届蓝桥杯拼音字母

    拼音字母 在很多软件中,输入拼音的首写字母就可以快速定位到某个词条.比如,在铁路售票软件中,输入: "bj"就可以定位到"北京".怎样在自己的软件中实现这个功能 ...

  4. Java实现第九届蓝桥杯等腰三角形

    等腰三角形 题目描述 本题目要求你在控制台输出一个由数字组成的等腰三角形. 具体的步骤是: 1. 先用1,2,3,...的自然数拼一个足够长的串 2. 用这个串填充三角形的三条边.从上方顶点开始,逆时 ...

  5. java实现第七届蓝桥杯七星填数

    七星填数 如图[图1.png]所示. 在七角星的14个节点上填入1~14 的数字,不重复,不遗漏. 要求每条直线上的四个数字之和必须相等. 图中已经给出了3个数字. 请计算其它位置要填充的数字,答案唯 ...

  6. 用Java模拟游戏重力的实现（弹跳）

    年末开了Java实训大作业 想了好几天决定选择马里奥小游戏 发现即使做出来但是跳跃功能是很“笨拙”的,和我们玩的游戏不一样,没有跳跃速度的快慢什么的,后来才知道这个叫做游戏里面重力的模拟. 组队做系统 ...

  7. ubuntu安装qt步骤（源码）

    1.安装gcc,g++ sudo apt-get install gcc sudo apt-get install g++ 2.解压源码包 tar xvzf qt-xxxx 3.安装xlib库 sud ...

  8. RabbitMQ系列之【设置RabbitMQ远程ip登录】

    由于账号guest具有所有的操作权限,并且又是默认账号,出于安全因素的考虑,guest用户只能通过localhost登陆使用,并建议修改guest用户的密码以及新建其他账号管理使用rabbitmq. ...

  9. [BZOJ]最长道路

    题目   点这里看题目.    BZOJ 上是权限题目. 分析   这道题可以用点分治,但是我就是喜欢边分治 QAQ .   分治过程中,我们考虑经过分治边的路径的最大痛苦值.一条经过分治边的路径会被 ...

  10. Redis系列（三）：redisServer、redisDb、redisObject、sds四大结构体理解

    一.源码下载: Windows中的Redis源码下载:https://github.com/microsoftarchive/redis/tree/3.2 根据官网说明可知,用VS2013编译,但是必 ...