1.包含文字的元素必须是块级元素,不是块级元素使用display:block使其具有块级元素属性;

2.具备上述基本条件后,css样式如下:

{
display: block;
max-width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

  如果包含在table的td元素内,td元素需要明确width的百分比,例如:width:20%;

CSS 文字超长省略显示并隐藏超长部分的更多相关文章

  1. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  2. CSS 文字溢出时的自动隐藏

    http://www.111cn.net/cssdiv/css/34050.htm 语法:overflow : visible | auto | hidden | scroll visible::不剪 ...

  3. jquery控制css的display属性(显示与隐藏)

    jquery控制div的显示与隐藏,很方便的. 例如: $("#id").show()表示display:block, $("#id").hide()表示dis ...

  4. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  5. css设置滚动条并显示或隐藏

    看效果,没有滚动条,超出div,开发中肯定不行. 有滚动条 最后就是想隐藏滚动条 代码 有滚动条并显示 <!DOCTYPE html> <html lang="en&quo ...

  6. css中有三个显示和隐藏的单词比较常见,display visibility 和 overflow我们需要区分开来

    display display 设置或检索对象是否及如何显示 display: none 隐藏对象与它相反的是display:block 除了转换为块级元素之外,同时还有显示元素的意思 特点: 隐藏之 ...

  7. css文字超出后显示...

    多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-lin ...

  8. js+css+div的点击后显示或者隐藏

    <html ><head><meta charset=utf-8 /><title>JS Bin</title></head>  ...

  9. CSS文字超出省略

    .ellipsis { white-space:nowrap overflow:hidden text-overflow:ellipsis }

随机推荐

  1. 201621123012 《Java程序设计》第14次学习总结

    作业14-数据库 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结与数据库相关内容. 2. 使用数据库技术改造你的系统 2.1 简述如何使用数据库技术改造你的系统.要建立什么表?截 ...

  2. Python操作配置文件configparser模块

    在实际的开发过程中,我们常有操作ini格式和conf格式配置文件的操作,Python为我们提供了configparser模块,方便我们对配置文件进行读写操作. config.ini配置文件内容如下: ...

  3. Mysql内置功能《五》 函数

    一 函数 MySQL中提供了许多内置函数,例如: 一.数学函数 ROUND(x,y) 返回参数x的四舍五入的有y位小数的值 RAND() 返回0到1内的随机值,可以通过提供一个参数(种子)使RAND( ...

  4. Ubuntu的中文乱码问题

    目标:使系统/服务器支持中文,能够正常显示. 1.首先,安装中文支持包language-pack-zh-hans: $ sudo apt-get install language-pack-zh-ha ...

  5. adb命令之pm

    常用的用法: 查看已经安装的包 pm list packages 查看已经安装的包以及apk路径(-3:只看第三方应用: -s:只看系统应用) -f: see their associated fil ...

  6. [ActionScript 3.0] 动态改变影片剪辑的颜色

    flash.geom.ColorTransform 可使用 ColorTransform 类调整显示对象的颜色值.可以将颜色调整或颜色转换应用于所有四种通道:红色.绿色.蓝色和 Alpha 透明度. ...

  7. CF765F Souvenirs 离线+线段树+主席树

    $ \color{#0066ff}{ 题目描述 }$ A县旁,连绵着一条长度为 n 的山脉,这条山脉由 n 座山峰组成,第 i 座山 峰的高度为 ai.作为著名的旅游县城,每天来到山脉游玩的旅客络绎不 ...

  8. BZOJ1688 Disease Manangement 疾病管理

    Disease Manangement 疾病管理   Description Alas! A set of D (1 <= D <= 15) diseases (numbered 1..D ...

  9. 微信小程序,全局变量方法的使用

    方法一:app.js 内设置全局变量(如屏宽,屏高的设置) 1.app.js文件,定义全局变量 /定义全局变量 globalData:{ userInfo:null, sysInfo:null, wi ...

  10. C语言实现数组逆置

    #include <stdio.h> #include <assert.h> void swap(int *a ,int *b) { int tmp = *a; *a = *b ...