php 中文 过长 省略号,css实现文字过长显示省略号
本篇文章介绍了css实现文字过长显示省略号的方法,具有一定的参考价值,希望对学习css的朋友有帮助!
一、CSS样式 解决文字过长显示省略号问题
1、一般样式
一般 css 样式,当宽度不够时,可能会出现换行的效果。这样的效果在某些时候肯定是不行的,可以修改 css 样式来解决这个问题。
text-overflow
.demo-split {
width: 500px;
height: 100px;
border: 1px solid #dcdee2;
background: palegreen;
}
.demo-split-pane {
padding: 10px;
color: red;
}
未使用 clip 自适应宽度
未使用 ellipsis 自适应宽度
new Vue({
el: '#app',
data() { return {
split: 0.4
}
}
})
左侧宽度变小,文字换行。
( 推荐学习:CSS教程 )
右侧宽度变小,文字换行。
2、文字过长显示省略号或显示截取的效果【通常写法:】
.test_demo_clip {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;
}
.test_demo_ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;
}【说明:】
text-overflow:表示当文本溢出时是否显示省略标记,ellipsis表示省略号效果,clip 表示截取的效果。
overflow:hidden; 将文本溢出的内容隐藏。
white-space:nowrap; 是禁止文字换行。
width: (可选)可以写固定值,也可以根据宽度自适应显示效果。
text-overflow
.test_demo_clip {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;
}
.test_demo_ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 200px;
background: palegreen;
}
.test_demo_defined_Width_clip {
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
background: bisque;
}
.test_demo_defined_Width_ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
background: bisque;
}
.demo-split {
width: 500px;
height: 100px;
border: 1px solid #dcdee2;
background: palegreen;
}
.demo-split-pane {
padding: 10px;
}
text-overflow : clip
不显示省略标记,而是简单的裁切条
text-overflow : ellipsis
当对象内文本溢出时显示省略标记
自定义宽度,根据宽度自适应大小
使用 clip 自适应宽度
使用 ellipsis 自适应宽度
new Vue({
el: '#app',
data() { return {
split: 0.4
}
}
})
clip 显示裁剪的效果,ellipsis 显示省略号的效果。
PHP中文网,大量编程教程,欢迎学习!
php 中文 过长 省略号,css实现文字过长显示省略号相关推荐
- css 文字过长 省略号,css实现文字过长显示省略号的方法
因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省略号代替.之前会使用程序截取的方法,不过使用css来截取更有利于SEO. 下面就介绍一下具体的使用方法 ...
- 【CSS】文字超过三行显示省略号...
代码: <!DOCTYPE html > <html ><head><meta http-equiv="Content-Type" con ...
- html 文字超出部分,CSS控制文字超出部分显示省略号方法
我们经常会看到有些网站比较长的字符就会显示省略号了,实现这种效果有两个办法,一种利用程序截取字符,另一种利用css实现超出部分显示省略号,下面我来介绍第二种. 测试浏览器: IE6/7/8/9.ope ...
- css超出两行省略号没效果,Css 设置超过再两行显示省略号
大部分场景都是超过一行就显示... {{item.name}} {{item.name}} export default { return { item: {name:'this is a very ...
- css设置不显示超出内容_显示...,css设置内容超出后显示省略号
1.使用overflow: hidden把超出的内容进行隐藏: 2.然后使用white-space: nowrap设置内容不换行: 3.最后使用text-overflow: ellipsis设置超出内 ...
- li 字多出了省略号_文字溢出自动显示省略号css方法 -
文字样式(Text Style)是一组可随图形保存的文字设置的集合,这些设置可包括字体设置以及特殊效果等.文字样式在不同的软件环境下显示的方式也会不一样.下面就来分享一下html中如何让文字竖排?总结 ...
- 关于用css实现的文字超出部分显示省略号
文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <d ...
- 【CSS】css文字超出显示省略号/文字超过三行显示省略号..
单行 .p1{/*单行*/white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} 多行 .p2{/*多行*/overflow: hidd ...
- li 字多出了省略号_文字溢出自动显示省略号css方法
这次给大家带来文字溢出自动显示省略号css方法,文字溢出自动显示省略号css的注意事项有哪些,下面就是实战案例,一起来看一下. 我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替 ...
最新文章
- 命令行 上下文环境 与 相对路径
- linux下单节点oracle数据库间ogg搭建
- Consul 服务注册与发现03—— 服务消费者
- 玩转百度地图(二)之画圆,高德地图、搜搜地图、搜狗地图等稍微修改即可...
- Memcpy, blockcopy的进一步理解
- Fiddler抓包工具详解(一)(fiddler原理,HTTP请求构成)
- python如何读取数据保存为新格式_python,初学者应用实例:读取文件中的数据,将将北京时间转换成世界时间,再保存成新的CSV格式文件...
- 【MFC系列-第20天】CDC绘图类成员介绍
- 《Java语言程序设计》(基础篇原书第10版)第十章复习题答案
- 安装虚拟机之下载windows镜像
- 从零开始学Android!渣本毕业两年经验,附超全教程文档
- 计算机专业英语单词完美打印,计算机专业英语词汇(完美排版_大容量打印版).pdf...
- Autosar配置CAN时间同步模块笔记
- 6000字跟你讲清数据运营到底是做什么的?
- CJB的大作 - 乱搞
- body 没有被撑开_为什么父div没有被撑开
- 如何使用FonePaw Video Converter Ultimate将 2D 电影转换为 3D
- Python手册(Machine Learning)--statsmodels(Regression)
- 将keras训练好的神经网络模型生成独立于python环境运行的.exe文件并在matlab中调用(上篇)
- 无分类编址(超网)中的网络前缀