CSS 文字太多用省略号表示
width:150px;/*要显示文字的宽度*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
<html>
<head>
<style type="text/css">
div
{
width:250px;/*要显示文字的宽度*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */
}
</style>
</head>
<body>
<div>
这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。
</div>
</body>
</html>
效果：
CSS 文字太多用省略号表示的更多相关文章
- CSS文字过多显示省略号
CSS文字过多显示省略号 /*-webkit-line-clamp用来限制在一个块元素显示的文本的行数*/ .dot1{ width: 100%; display: -webkit-box; -web ...
- css文字溢出显示省略号
1.单行文字溢出显示省略号. overflow: hidden; text-overflow: ellipsis; white-space: nowrap;//文本不换行 2.多行文本溢出显示省略号. ...
- css文字超出显示省略号
单号: white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 多行: word-break: break-all; text-ove ...
- css文字超出变省略号...
<style>.text1 { width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-over ...
- 列表中文字太多 溢出使用省略号css方法
我们经常会遇到文字太多,而为了不打破原有布局,需要将多出文字用省略号代替,实现以下效果: 文字太太太太多多多啦...... 这个不多. html:这是个列表.ul/ol都行. <ul> & ...
- --css 控制文字多使用省略号
--css 控制文字多使用省略号.overflowPoint{ text-overflow:ellipsis;width: 200px;overflow: hidden;}<div class= ...
- css文字超出自动显示省略号
只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...
- css文字单行/多行超出显示省略号...
css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...
- css超出一行添加省略号属性:text-overflow和white-space
通过使用text-overflow和white-space属性来使文本在一行内显示,超出则加省略号,添加如下html代码: <p>前端开发博客专注前端开发和技术分享,如果描述超过100像素 ...
随机推荐
- python之 自动补全 tab
1.在python中运行命令sys.path查看python路径 >>> import sys>>> import tabTraceback (most recen ...
- Oauth2手册 第一章
来源:https://github.com/jeansfish/RFC6749.zh-cn/blob/master/SUMMARY.md 1. 简介在传统的客户端-服务器身份验证模式中,客户端请求服务 ...
- Winform 窗体实现圆角展示
触发窗体的Resize事件,如下所示: #region 界面实现圆角 private void LoginForm_Resize(object sender, EventArgs e) { if (t ...
- ADO.Net操作数据库的方式
1.使用数据提供程序执行sql或者ddl语句操作数据库. 2.使用oledb操作数据库 3.使用odbc操作数据库 4.使用DataSet操作数据库 前面3种方式都无法避免要使用sql语句,对不同种类 ...
- CentOS 7系统初始化
1. 升级系统 $ yum -y update 2.SELinux设置: 禁用 $ vi /etc/selinux/config 修改 SELINUX=disabled
- MTSC2018 | 确认过眼神，在这里能遇见Google、阿里、百度......
MTSC2018部分Topic曝光啦 Google,阿里,百度,美团,小米,360,网易等公司是如何将技术转化为现实生产力,提高工作效率的?离开Saucelab的Jonathan又是如何规划Appiu ...
- SSIS 中将csv 文件批量导出到excel 文件，并设置excel 文件中某些列的data column format 为Text
csv 文件是文本文件类型,但是打开csv 文件后(默认使用本地已经安装的excel 来打开excel 文件),默认显示出来的是general 类型(column data format)的数据, 这 ...
- LeetCode【112. 路径总和】
思路就是从根节点开始向下选节点,依次与sum比较大小,若小,则向下选左右节点其中一个,若大,则接下来判断是否是叶子节点,若是,则返回false 若不是,则上一步选另一节点,再将上述重新执行. 对于叶子 ...
- 开源邮件系统Zimbra Collaboration – Open Source Edition
https://www.zimbra.com/downloads/zimbra-collaboration-open-source/ Zimbra Collaboration – Open Sourc ...
- WPF 和 百度 eChart 交互
https://blog.csdn.net/defrt4/article/details/52689052