css如何让文字不换行,css如何让文字不换行显示?
在CSS中,可以通过white-space属性来实现文字不换行显示;只要将white-space属性的值为nowrap就可强制文字不换行。
white-space属性指定元素内的空白怎样处理。它有以下属性值:
normal:默认。空白会被浏览器忽略。
pre:空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
nowrap:文本不会换行,文本会在在同一行上继续,直到遇到
标签为止。
pre-wrap:保留空白符序列,但是正常地进行换行。
pre-line:合并空白符序列,但是保留换行符。
示例:
p {
width: 400px;
height: 50px;
border: 1px solid red;
}
.nowrap{
white-space: nowrap;
}
普通文本!!!
这是一些文本。 这是一些文本。 这是一些文本。
强制文字不换行!!!
这是一些文本。 这是一些文本。 这是一些文本。
效果图:
white-space属性可和overflow属性、text-overflow属性一起使用,使用文字不换行、超出部分隐藏并显示为省略号、
示例:
p {
width: 400px;
height: 50px;
border: 1px solid red;
}
.nowrap{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
普通文本!!!
这是一些文本。 这是一些文本。 这是一些文本。
强制文字不换行!!!
这是一些文本。 这是一些文本。 这是一些文本。
CSS样式 解决文字过长显示省略号问题
一.CSS样式 解决文字过长显示省略号问题 1.一般样式 一般 css 样式,当宽度不够时,可能会出现换行的效果.这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题.
CSS+DIV实现文字一行内显示,并且过多的文字以点来代替
有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候,为了页面的美观,这里需要将文字在div中一行显示,并且将过多的文字进行隐藏,以点号进行代替.当鼠标放上面的时候会以title的形式显示所有 ...
css+div解决文字溢出控制显示字数
一.一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com] .text-overflow {display:block;/*内联对象需加*/widt ...
CSS学习笔记:文本换行显示(word-wrap)
在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. ...
CSS样式中文字的换行
在我们做输出时可能会遇到这样一个问题,就是汉字和英文字母相遇,然后自动换行的问题.例如,当我在输出产品标题时,由于产品名称比较长,包括汉字和英文字母,FF下浏览是正常的,而IE下面 英文会出现换行.当 ...
css实现页面文字不换行、自动换行、强制换行
强制不换行 div{ white-space:nowrap; } 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div ...
css纯字母或者字母换行显示
white-space:normal; word-break:break-all;
EasyUIDataGrid列标题换行显示
有时候表格标题字数太多,而宽度有限,就会导致一部分列的标题显示不出来 这时候,加入如下css代码即可将标题换行显示 .datagrid-header-row .datagrid-cell span { ...
css 文字超出部分显示省略号(原)
单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...
随机推荐
如何使用免费PDF控件从PDF文档中提取文本和图片
如何使用免费PDF控件从PDF文档中提取文本和图片 概要 现在手头的项目有一个需求是从PDF文档中提取文本和图片,我以前也使用过像iTextSharp, PDFBox 这些免费的PD ...
php数据通信方式
一:curl$ch = curl_init();curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);curl_setopt($ch,CURLOPT_TIMEOU ...
php 递归 适合刚刚接解递归的人看
递归,就是自己调用自己,当满足某条件时层层退出(后进先出). --------------------------------------------------------------------- ...
iOS 进阶—— iOS 内存管理
1 似乎每个人在学习 iOS 过程中都考虑过的问题 alloc retain release delloc 做了什么? autoreleasepool 是怎样实现的? __unsafe_unretai ...
Percona XtraBackup 核心文档
1. 介绍 1.1 MySQL 备份工具特性对比 Features Percona XtraBackup MySQL Enterprise backup License GPL Proprietary ...
C++解析十-数据封装
数据封装 所有的 C++ 程序都有以下两个基本要素: 程序语句(代码):这是程序中执行动作的部分,它们被称为函数. 程序数据:数据是程序的信息,会受到程序函数的影响.封装是面向对象编程中把数据和操作数 ...
Django学习笔记(基础篇)
Django学习笔记(基础篇):http://www.cnblogs.com/wupeiqi/articles/5237704.html
Java NIO 读取文件、写入文件、读取写入混合
前言 Java NIO(new/inputstream outputstream)使用通道.缓冲来操作流,所以要深刻理解这些概念,尤其是,缓冲中的数据结构(当前位置(position).限制(limi ...
cmake重新编译
删除文件夹下的文件 rm CMakeCache.txt 重新编译即可 安装g++ yum install gcc-c++
在Terminal中的光标的使用技巧
如何简单操作? 在 Terminal(终端) 中,有许多操作技巧,这里就介绍几个简单的. 光标 up(方向键上) 可以调出输入历史执行记录,快速执行命令 down(方向键下) 配合 up 选择历史执行 ...
css如何让文字不换行,css如何让文字不换行显示?相关推荐
- html文字自动换行 ie,css 自动换行 强制换行属性 (firefox+ie)
css 自动换行 强制换行属性 (firefox+ie) 发布时间:2009-10-13 17:40:39 作者:佚名 我要评论 css 自动换行 强制换行属性,在实际应用中,如果不强制换行会 ...
- 前端笔记(9)元素的隐藏与显示,css用户界面样式,vertical-align垂直对齐,溢出文字省略号显示,css精灵技术,过渡,焦点,滑动门,margin负值
css样式表/层叠样式表(7) 元素的隐藏与显示 (1)dispaly显示 (2)visibility可见性 (3)overflow溢出 css用户界面样式 鼠标样式cursor 轮廓线outline ...
- html遇到英文单词整体换行,CSS单词换行and断词,你真的完全了解吗_html/css_WEB-ITnose...
背景 某天老板在群里反馈,英文单词为什么被截断了? 很显然,这是我们前端的锅,自行背锅.这个问题太简单了,css里加两行属性,分分钟搞定. 开心的提交代码,刷新页面.我擦,怎么还是没有断词?不可能啊! ...
- php控制文本换行,css如何控制文字换行方式?(代码示例)
css如何控制文字换行方式?本篇文章就给大家介绍css设置文字(特别是连续的数字和英文)强制换行.强制不换行且隐藏超出部分的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 一. ...
- css html 字竖,CSS实现文字竖排 DIV CSS文字垂直竖列排版显示如何实现?
DIV CSS实现文字竖排排版显示兼容各大浏览器,让文字垂直竖列排版布局. 有时我们需要一段文字进行从上到下竖列排版,我们知道CSS样式中有一样式可以让其竖列排版,但所有浏览器不全兼容,逼不得已放弃. ...
- html文字段落缩进,CSS text-indent段落首行文字缩进分享
DIV CSS text-indent段落首行文字缩进,CSS段首缩进,可控制缩进距离样式教程篇 让每个段落首行开头文字缩进,如缩进2个文字距离样式,我将用到text-indent属性样式. .div ...
- html 文本标签 不换行,css如何强制不允许换行?
在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.下面我们来看一下如何使用css设置强制文字不换行. white-space:nowrap; 强制不换行,对中文英文都起作用. css ...
- css文字换行时对不齐,css小技巧 - 换行对齐
假如需要你实现换行对齐,你可能会想到ul标签和li标签自带这种功能 确实在使用li标签自带的项目符号的时候可以直接使用,但是有时可能会有不一致时 就需要我们动手写两行代码来实现一下,比如这种效果: 项 ...
- 【前端第四课】CSS值和单位;CSS文字排版;CSS变换,过渡,动画;CSS定位
目标 了解掌握CSS值和单位 了解掌握CSS文字排版 了解掌握CSS变换,过渡,动画 了解掌握CSS定位 CSS的值和单位 https://developer.mozilla.org/zh-CN/do ...
最新文章
- 解决日常bug的正确姿势
- php array_merge内存不够,php array_merge函数使用需要注意的一个问题
- php调用字符串函数参数,如何从包含参数的变量中存储的字符串调用PHP函数
- wxWidgets:显示和测试 wxDC 功能
- 转Oracle性能参数—经典常用
- php验证码雪花源码,php如何生成雪花背景验证码(附代码)
- php路由有几种,thinkphp3.2框架的四种路由形式
- C#进行Post请求(解决url过长的问题)
- A公司物流配送安全风险管理现状
- vector扩容时以2倍或1.5倍扩容的原因
- 数据分析十年来电影票房数据
- HTML5游戏实战 3 60行代码实现水平跑酷游戏
- 负载均衡及其常见实现方式
- 瀚高数据库企业版中的权限问题
- Androidadb驱动实现原理
- 【Qt学习笔记】包含头文件确报错 does not name a type
- esxi导出ovf报错
- sdutOJ 查字典(Python)
- 解决VUE在浏览器全屏下监听不到Esc键盘事件
- 数学建模竞赛解题思路
热门文章
- 中科大计算机网络空间安全,2020年中国科学技术大学网络空间安全考研经验分享...
- 面试题-java高级(答案超详细)
- vue scoped html样式无效
- 【VMware vRealize Suite 2019 部署系列】- 「2」 – 部署 vRealize Operations 8.1
- UE-摄像机视角的切换
- 排列组合之错排问题总结
- Kafka之Controller(Broker的领导者)
- 阿里云服务器挖矿程序解决流程
- 记录一次清理挖矿程序
- QT5.15.2__wind10 64 源码编译