word-break属性和css换行显示
这几天在做项目的时候,遇到了比较棘手的问题,便是在一个标签里边展示内容,如果说展示中文汉字,一点问题都没有,但是只要连续展示英文字母或者中文的标点符号(中间不带空格),那么所渲染的内容就不会换行,而是超出标签来显示,如下图:
为了解决让所有的内容都不超出标签的宽度,超出后自动换行的问题,便找到了word-break这个属性。
word-break的其中有两个值为break-word和break-all,下面将对这两个值做一比较:
break-word:英文单词在一行中所剩下的空间无法放下,那么这个单词并不会换行显示,而是将这个单词从盒子最大宽度处截开(一个单词显示两行,前半截在第一行,后半截在第二行);
break-all:英文单词在一行中所剩下的空间无法放下,那么这个单词就会换行显示,保证单词不会被截断(一个单词显示一行)
所以解决这个问题的办法就是在这个盒子上添加一个属性word-break:break-word;就能搞定。
单行或多行容纳不下内容显示...less样式
/*单行溢出*/
.one_txt_cut() {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*多行溢出 手机端使用*/
.txt_cut(@num:2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @num;
-webkit-box-orient: vertical;
}
word-break属性和css换行显示的更多相关文章
- css如何让文字不换行显示?
在CSS中,可以通过white-space属性来实现文字不换行显示:只要将white-space属性的值为nowrap就可强制文字不换行. white-space属性指定元素内的空白怎样处理.它有以下 ...
- CSS换行文本溢出显示省略号
现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...
- CSS学习笔记:文本换行显示(word-wrap)
在CSS3中新定义了文本换行属性,word-wrap: nomal属性值表示控制连续文本换行. break-word属性值表示内容将在边界内换行.如果需要,词内换行(word-break)也会发生. ...
- 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果。
查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...
- (转)面向属性的CSS命名
原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...
- 面向属性的CSS命名
自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...
- [转]CSS Display(显示) 与 Visibility(可见性)
CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏. 隐藏元素 - display:non ...
- CSS换行:word-wrap、word-break和text-wrap区别
一.word-wrap:允许对长的不可分割的单词进行分割并换行到下一行.(中英文处理效果一样) word-wrap有两个取值: 1.word-wrap: normal:只在允许的断字点换行(浏览器保持 ...
- CSS换行2
1.可以使用强制换行符号<br />换行.如果在一个文章里可以在文章需要换行的地方加入<br />即可实现自动换行-常说的小换行,与换行前没有间隔.实例如下图 换行说明图无间隔 ...
随机推荐
- eclipse离线安装pydev
首先,下载去http://pydev.org/下载Python的Eclipse插件PyDev. 目前的最新版是PyDev 2.7.1.zip,将压缩文件解压出来.得到features和plugins两 ...
- 理解题意后的UVa340
之前理解题意错误,应该是每一次game,只输入一组答案序列,输入多组测试序列,而之前的错误理解是每一次输入都对应一组答案序列和一组测试序列,下面是理解题意后的代码,但是还是WA,待修改 #includ ...
- 我的C++笔记(语句基本结构)
#include <iostream> using namespace std; int main() { unsigned char c1=24; int year; bool isLe ...
- SPL类
用途:对类,方法,属性,参数的提取生成文档:自动加载插件 实列化类同于new:$ref = new ReflectionClass($classname);$class = $ref->newI ...
- 解读:20大5G关键技术
解读:20大5G关键技术 5G网络技术主要分为三类:核心网.回传和前传网络.无线接入网. 核心网 核心网关键技术主要包括:网络功能虚拟化(NFV).软件定义网络(SDN).网络切片和多接入边缘计算(M ...
- oracle 删除表空间及数据文件方法
oracle 11g版本,创建数据库表空间,默认单个数据文件最大为32G,如果数据文件大于32G,可以增加数据文件. --删除空的表空间,但是不包含物理文件 drop tablespace table ...
- 获取Centos7安装Docker各种姿势(指定版本)(转载)
Centos7安装docker社区(CE)版 官网指导:https://docs.docker.com/engine/installation/linux/docker-ce/centos/#inst ...
- 快速搭建一个本地的FTP服务器 win10及win7
快速搭建一个本地的FTP服务器 如果需要开发FTP文件上传下载功能,那么需要在本机上搭建一个本地FTP服务器,方便调试. (win10) 第一步:配置IIS Web服务器 1.1 控制面板中找到“ ...
- SQL2012安装
SQL2012安装 1.打开SQL安装包,点击setup安装 2.选择安装界面,点击全新安装 3.验证通过后,点击确定 4.选择我接受,点击下一步 5.在外网环境,可进行在线更新,内网环境取消勾选产品 ...
- python二级登陆菜单
""" 1.三级菜单 注册 登陆 注销 2.进入每一个一级菜单,都会有下一级的菜单"""user_item = dict()try: whi ...