php实现一行省略号,css实现文字溢出省略号的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现文字溢出省略号的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
在项目中有涉及实现一行或者第几行后加省略号,在实现第几行后加省略号的时候,使用的是-webkit-line-clamp、-webkit-box-orient属性,会出现webpack打包-webkit-box-orient属性被忽略的情况,这里记录下
1.单行实现文字省略号/* 这里要显示的设置宽度 */
overflow: hidden;
white-space: nowrap;
/* 文字超出宽度则显示ellipsis省略号 */
text-overflow: ellipsis;
width: 100%;
2.第几行实现文字省略号display: -webkit-box;
-webkit-box-orient: vertical; /* 设置方向 */
-webkit-line-clamp: 2; /* 设置超过为省略号的行数 */
overflow: hidden;使用webpack打包工具时,会忽视这个-webkit-box-orient属性,这里修改成下面的写法就可以了display: -webkit-box;
overflow: hidden;
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
-webkit-line-clamp: 8;
text-overflow: ellipsis;
3.用js实现字数后加省略号if (title.length > 26) {
title = title.substring(0, 27) + "...";
}
4.换行word-break和word-wrapwhite-space:normal(自动换行),当写入的文字超过定义的宽度后会自动换行,但当写入的数据是一堆没有空格的字符或者字母或者数字时,超过容器的宽度时就会把容器撑大,不换行
这时可以用:word-break:break-all;word-wrap:break-word来解决
word-break:break-all在超过容器宽度时,若有一个单词很长,则会将单词截断,分开写
word-wrap:break-word在超过容器宽度时,若有一个单词很长,则会将单词放到下一行,而不对单词进行截断
word-break : normal | break-all | keep-all
normal :允许在字内换行
break-all : 允许在单词内换行
keep-all : 只能在半角空格或连字符处换行。
word-wrap : normal | break-word
normal : 允许内容顶开指定的容器边界
break-word : 内容将在边界内换行。如果需要,词内换行(word-break)也会发生
php实现一行省略号,css实现文字溢出省略号的四种方法(附代码)相关推荐
- css鼠标点在文字上背景透明,CSS实现文字半透明显示在图片上方法(示例代码)
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
- css中div居中显示的四种方法
css中设置div元素居中显示的四种方法 一.先确定div的基本样式 二.具体实现方法 第一种:利用子绝父相和margin: auto实现 第二种:利用子绝父相和过渡动画tranform实现 第三种: ...
- 网页css实现文字竖向排版的几种方法
下面介绍几种使用Css实现文字竖向排版的方法: 1.一个句子的竖向排列 如图: <!DOCTYPE html> <html> <head> <title> ...
- css设置文字溢出省略号显示
- 双飞翼 html 布局,css实现双飞翼布局的四种方法(附代码)
本篇文章给大家带来的内容是关于css实现双飞翼布局的四种方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 圣杯布局.双飞翼布局效果图 从效果图来看圣杯布局.双飞翼布局效果 ...
- css文字溢出省略号显示
单行文字溢出省略号显示 步骤: 1.强制文字一行显示 white-space: nowrap; 2.溢出部分隐藏起来 overflow: hidden: 3.文字溢出的时候用省略号显示 text-ov ...
- css之单行文字溢出省略号显示
单行文本溢出显示省略号--必须满足三条件 //1.强制一行内显示文本 white-space:nowrap;(默认自动换行) //2.超出部分隐藏 overflow:hidden; //3.文字用省略 ...
- css设置文字溢出隐藏
css设置文字溢出隐藏 让文字只显示一行,超出显示省略号 多行文本, 显示 n 行,剩下的省略号替代 仅仅是用来提示自己,不要忘记的 让文字只显示一行,超出显示省略号 overflow: hidden ...
- Unity UGUI 之 实现 Text 文本文字过长,省略号显示(TextMeshPro 和常规 Text 二种方法)
Unity UGUI 之 实现 Text 文本文字过长,省略号显示(TextMeshPro 和常规 Text 二种方法) 目录 Unity UGUI 之 实现 Text 文本文字过长,省略号显示(Te ...
最新文章
- Flash Builder 4.7 安装
- C#数组排序(按列)
- 切图工具优化的几点总结
- 自定义注解-aop实现日志记录
- python 绝对路径
- 极路由安全设计架构分析
- Android sqlite load_extension漏洞解析
- Linux采用服务器网址,Linux实现https方式访问站点
- String的按值传递,java传参都是传值
- vue-cli watch简单用法
- 如果 AI 技术可以让你永生,你愿意么?
- elasticsearch及Kibana入门安装
- Math类的常用方法和静态导入.
- 2台电脑一根网线传文件_安卓端和Mac快速连接传文件
- cam350怎么看顶层_CAM350软件怎么查看gerber文件 cam350导出gerber教程
- 星星之火可以燎原鸿蒙,余承东:没有人能够熄灭满天星光 星星之火可以燎原...
- 疯狂Python讲义学习笔记(含习题)之网络编程
- 小单刷题笔记之鲁卡斯队列(浮点数比较)
- 求两点之间最短路径-Dijkstra算法
- Python+班级管理系统 毕业设计-附源码171809