css怎么让字体不换行?

在css中,可以使用white-space属性来强制文字字体不换行;通常我们使用white-space:nowrap来强制文本文字内容不换行,文本会在在同一行上显示,直到遇到 <br> 标签为止。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			div {
				width: 120px;
				height: 60px;
				line-height: 20px;
				border: 1px solid red;
				margin: 10px;
			}
			
			.demo {
				white-space: nowrap
			}
		</style>
	</head>

	<body>
		<div>内容将会不被换行显示</div>
		<div class="demo">内容将在一行内强制显示完整</div>
	</body>
</html>

效果图:

1.jpg

white-space属性用于指定如何处理容器中的空白字符,例如:空格( )、换行(\n)、缩进(\t)等。

white-space出自CSS1,适用于块状元素,具有继承性,支持IE 5.5+、Chrome、FireFox、Safari、Opera等所有主流浏览器,其默认值为normal。

语法:

white-space : normal | pre | nowrap | pre-wrap | pre-line;

white-space支持normalprenowrappre-wrappre-line等值。下面我们来详细介绍这些值之间的区别。

  • normal:默认。空白会被浏览器忽略。

  • pre:空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。

  • nowrap:文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。

  • pre-wrap:保留空白符序列,但是正常地进行换行。

  • pre-line:合并空白符序列,但是保留换行符。

Image placeholder
前端答疑
未设置
  21人点赞

没有讨论,发表一下自己的看法吧

推荐文章
css如何让字体不加粗?

在CSS中可以使用font-weight:normal样式来让字体不加粗。font-weight属性设置文本的粗细,设置值为normal来定义标准的字符。font-weight属性用于设置显示元素的文

css text不换行怎么办

csstext不换行怎么办css强制换行需要设置word-wrap属性和word-break属性,具体设置如下:div{ word-wrap:break-word; word-break:break-

html和css不换行代码是什么?

html和css不换行代码是什么?一、HTML不换行代码:在网页排版布局中比如文章列表标题排版,无论多少文字均不希望换行显示,需要强制在一行显示完内容。这就可以nobr标签来实现。语法:内容不换行内容

css怎么让输入框不显示光标?

css怎么让输入框不显示光标?网上有很多方式:用div模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,最后还是找到一位大神提供的方法完美解决。一、首先隐

css怎么让表单右对齐?

css怎么让表单右对齐?只需要在表单外套个div标签,设置text-align:right;即可。(相关课程推荐:css视频教程) 居中对齐 .a{ width:300px; height:3

css怎么让图片填满?

css怎么让图片填满?1、新建一个HTML文件,使用div标签创建一个模块,并设置其class属性为myclass。 Document (推荐学习:CSS视频教程)2、在标签里设置div

css怎么设置字体为宋体?

css怎么设置字体为宋体?css设置字体使用font-family属性,设置为宋体,可以使用font-family:宋体;,或者font-family:SimSun;。font-family:规定元素

css怎么解决h1不独占一行?

css怎么解决h1不独占一行?H标签默认都是独占一行的。当它们不独占一行时,可能有以下原因:设置了display为inline或inline-block设置了父级元素display为flex,并且fl

谷歌限制华为使用安卓服务!任正非首次回应美国禁令:半导体不卖给我们也没关系

大数据文摘编辑部出品5月19日,路透社援引单一匿名信源报道称,Google已经停止与华为之间除了开源以外的一切业务。也就是说,谷歌公司已经暂停了与华为公司的商业往来。据路透社报道:“华为只能使用安卓系

css字体样式怎么取消

css字体样式不能够取消,只能够覆盖,具体的操作如下:例如有下面这样一段超级个性的css:p{ color:red; font-size:22px; font-style:italic; font-w

nginx不能访问css怎么办

nginx不能访问css怎么办在Nginx配置文件nginx.conf中内添加location~.*\.(gif|jpg|jpeg|png|bmp|swf|css|js|eot|svg|ttf|wof

css怎么画三角形?

css怎么画三角形?三角形实现原理:宽度width为0;height为0;方法:设置div长宽为0,只用边框宽填充,三角形的底部边框设置颜色,剩下的三边用透明边框设置即可。使用border属性即可设置

css怎么去除定位?

如果没有指定元素的position属性值,也就是默认情况下,元素也是静态定位。只要是支持position属性的html对象都是默认为static。static是position属性的默认值,它表示块保

css怎么定位?

position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默

css怎么做直角三角形

css怎么做直角三角形一个盒子包括:margin+border+padding+content。上下左右边框交界处出呈现平滑的斜线。利用这个特点,通过设置不同的上下左右边框宽度或者颜色可以得到小三角,

thinkphp加载不了css怎么办?

thinkphp加载不了css怎么办?如何解决?解决方法:1、项目入口文件index.php

css怎么设置div居中?

css设置div居中的方法1、利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-t

css怎么设置图片平铺方式?

background-repeat属性是用来设置背景图像如何平铺的。默认地,背景图像在水平和垂直方向上重复。属性值:repeat:即默认方式,完全平铺背景;no-repeat:在X及Y轴方向均不平铺;

dreamweaver中CSS怎么设置

dreamweaver中CSS怎么设置1、打开软件后,我们可以直接按下快捷键【Ctrl+J】2、或者,我们点击菜单栏的修改命令按钮。3、然后,我们点击页面属性按钮。4、接下来我们就会看到页面属性这个窗

三角形用css怎么写?

三角形用css怎么写?1,首先,我创建了一个class名为‘box’的div,我们暂且亲切的称它为‘小盒子’html: css: .box{ width:20px; height:20px; back

css怎么适配不同分辨率屏幕?

这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适应性,其布局结构要做到根据不同的设备及屏幕分辨率进行响应调整。我们可以使用CSS实现改变浏览器显示宽度从而实现布局的网页宽度动态改变

css怎么写在html中?

css怎么写在html中?css样式写法可以分为:●内嵌式●内部样式表●外部样式表HTML中直接写css只能使用内嵌式和内部样式表。(相关课程推荐:css视频教程)一、内嵌式将css代码写在HTML元

jq css怎么用?

jqcss怎么用?jquery中,css()方法用来返回或设置匹配的元素的一个或多个样式属性。语法:$(selector).css(name) $(selector).css(name,value)

css怎么控制网页内容不让选择和复制?

css怎么控制网页内容不让选择和复制?要想通过CSS禁用页面内容选中和复制操作,需要增加如下代码:-moz-user-select:none; -webkit-user-select:none; -m

iis不加载css怎么办?

iis不加载css怎么办?解决方法:打开或关闭window功能中的Internet信息服务里的万维网服务=>常见HTTP功能=>静态内容选中后安装即可。