在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实现罗马数字转十进制

    古罗马帝国开创了辉煌的人类文明,但他们的数字表示法的确有些繁琐,尤其在表示大数的时候,现在看起来简直不能忍受,所以在现代很少使用了.之所以这样,不是因为发明表示法的人的智力的问题,而是因为一个宗教的原 ...

  2. java实现第二届蓝桥杯四方定理

    四方定理. 数论中有著名的四方定理:所有自然数至多只要用四个数的平方和就可以表示. 我们可以通过计算机验证其在有限范围的正确性. 对于大数,简单的循环嵌套是不适宜的.下面的代码给出了一种分解方案. 请 ...

  3. Java实现第九届蓝桥杯耐摔指数

    耐摔指数 题目描述 x星球的居民脾气不太好,但好在他们生气的时候唯一的异常举动是:摔手机. 各大厂商也就纷纷推出各种耐摔型手机.x星球的质监局规定了手机必须经过耐摔测试,并且评定出一个耐摔指数来,之后 ...

  4. java实现第六届蓝桥杯显示二叉树

    显示二叉树 题目描述 排序二叉树的特征是: 某个节点的左子树的所有节点值都不大于本节点值. 某个节点的右子树的所有节点值都不小于本节点值. 为了能形象地观察二叉树的建立过程,小明写了一段程序来显示出二 ...

  5. Java重置Mysql主键自增长值

    MySql 主键自增重置器(统一处理多个表) resetAutoincrement 是一款基于 Java 开发的程序,其功能为重置 mysql 数据库表的主键自增的值为最近的一个. 介绍 开发背景主要 ...

  6. vue踩过的坑（'url' is assigned a value but never used no-unused-vars）

    1.代码编写 2.遇见错误 3.解决方案 在错误代码后加入注释:(// eslint-disable-line no-unused-vars) 之后页面上就不会出现该错误信息了

  7. ODEINT 求解常微分方程(4）

    import numpy as np from scipy.integrate import odeint import matplotlib.pyplot as plt # function tha ...

  8. C# .net framework .net core 3.1 请求参数校验, DataAnnotations, 自定义参数校验

    前言 在实际应用场景中我们常常要对接口的入参进行校验, 例如分页大小是否正确, 必填参数是否已经填写等等. 最简单的实现方式如下图, 这种在实际开发中代码过于冗余, 而且不灵活. 今天介绍一种统一参数 ...

  9. PIP设置镜像源

    PIP设置镜像源 pip安装Python包时候,默认是国外的下载源,速度太慢,本文介绍几种设置pip国内镜像源的方法 镜像源 阿里云 http://mirrors.aliyun.com/pypi/si ...

  10. 前台页面id为空--驼峰命名映射

    错误: 前台页面id为空,或其他数据映射问题(方案2) 原因: java的bean类属性和数据库字段命名不一致,查询的时候就不能把数据封装进bean类里,  在数据库字段命名规范中,通常使用下划线“_ ...