在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实现埃拉托色尼筛选法

    1 问题描述 Compute the Greatest Common Divisor of Two Integers using Sieve of Eratosthenes. 翻译:使用埃拉托色尼筛选 ...

  2. Java实现 洛谷 P1280 尼克的任务

    import java.util.Scanner; public class Main { public static class edg{ private int to; private int n ...

  3. Java实现寻找最小的k个数

    1 问题描述 有n个整数,请找出其中最小的k个数,要求时间复杂度尽可能低. 2 解决方案 2.1 全部排序法 先对这n个整数进行快速排序,在依次输出前k个数. package com.liuzhen. ...

  4. java实现第四届蓝桥杯组素数

    组素数 题目描述 素数就是不能再进行等分的数.比如:2 3 5 7 11 等. 9 = 3 * 3 说明它可以3等分,因而不是素数. 我们国家在1949年建国.如果只给你 1 9 4 9 这4个数字卡 ...

  5. svg 贝塞尔曲线图解（记录）

    path路径绘制中,绘制贝塞尔曲线的命令包括: Q 二次贝赛尔曲线 x1,y1 x,y T 平滑二次贝塞尔曲线 x,y C 曲线(curveto) x1,y1 x2,y2 x,y S 平滑曲线 x2, ...

  6. go语言实现"生产者"和"消费者"的例子

    学习java的多线程的时候最经典的一个例子就是生产者消费者模型的例子,最近在研究go语言协程,发现go提供的sync包中有很多和java类似的锁工具,尝试着用锁工具配合协程实现一个"消费者& ...

  7. 基于 abp vNext 和 .NET Core 开发博客项目 - Blazor 实战系列（二）

    系列文章 基于 abp vNext 和 .NET Core 开发博客项目 - 使用 abp cli 搭建项目 基于 abp vNext 和 .NET Core 开发博客项目 - 给项目瘦身,让它跑起来 ...

  8. Java学习之第二天

    一.流程控制 1.顺序结构:自上而下,依次执行(从上到下,一直走下去) 2.选择结构:(1)if .if—else.嵌套if (2)switch(mod){ case 1:执行代码 case 2:执行 ...

  9. css布局中的垂直水平居中对齐

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  10. .net core3.1 abp动态菜单和动态权限（动态菜单实现和动态权限添加） （三）

    我们来创建动态菜单吧 首先,先对动态菜单的概念.操作.流程进行约束:1.Host和各个Tenant有自己的自定义菜单2.Host和各个Tenant的权限与自定义菜单相关联2.Tenant有一套默认的菜 ...