单行和多行文字溢出省略号显示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>单行和多行文字溢出省略号显示</title><style type="text/css">.container1{width: 150px;height: 80px;background-color: #f5f5f5;margin: 2px auto;white-space: nowrap;/*先强制一行内显示文本*/overflow: hidden;/*超出部分隐藏*/text-overflow: ellipsis;/*文字用省略号代替超出部分*/}.container2{width: 150px;height: 40px;background-color: #f5f5f5;margin: 2px auto;/*有较大兼容性问题，适合于webKit浏览器或者移动端(移动端大部分使用webKit内核)*/overflow: hidden;text-overflow: ellipsis;display: -webkit-box;/*弹性伸缩盒子模型显示*/-webkit-line-clamp:2 ;/*限制在一个块级元素显示的文本行数*/-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式*/}      </style></head><body><div class="container1">单行文字溢出省略号显示</div><div class="container2">多行文字溢出省略号显示,多行文字溢出省略号显示</div></body>
</html>

欢迎访问我的个人博客

单行和多行文字溢出省略号显示相关推荐

css多行文字溢出省略号显示
<style>div{width: 150px;height: 80px;background-color: pink;margin: 100px auto;/* 2.overflow:h ...
css 每个样式单行显示,单行文字溢出和多行文字溢出省略号显示的CSS样式
<JavaScript高级程序设计>读书笔记--(3)引用类型 ECMAScript从技术来说是一门面向对象的语言,但不具备传统的面向对象语言所支持的类和接口等基本结构.虽然引用类型与类看 ...
css文字溢出省略号显示
单行文字溢出省略号显示步骤: 1.强制文字一行显示 white-space: nowrap; 2.溢出部分隐藏起来 overflow: hidden: 3.文字溢出的时候用省略号显示 text-ov ...
css之单行文字溢出省略号显示
单行文本溢出显示省略号--必须满足三条件 //1.强制一行内显示文本 white-space:nowrap;(默认自动换行) //2.超出部分隐藏 overflow:hidden; //3.文字用省略 ...
移动常见问题--H5标签之浏览器兼容性、JS之浏览器兼容性、CSS3之浏览器兼容性、移动端动画、click300ms延迟、单行和多行文字溢出省略、水平居中和垂直居中
1. H5标签之浏览器兼容性在移动端时可以放心的使用h5相关的标签但是如果需要兼容一些低版本的浏览器,例如IE6/7/8,此时可以到 [兼容] 下载一个 html5shiv.min.js 文件 ...
单行和多行文字溢出显示省略号
单行一般加这个三个属性即可 overflow:hidden; text-overflow: ellipsis; white-space: nowrap; 多行需加下面属性 display: -webk ...
实现一行或多行文字溢出隐藏显示省略号
1.css控制文字只显示一行,超出部分显示省略号例如:1行后省略 <style> p{ width:300px; overflow:hidden; white-space:nowrap; ...
css设置文字溢出省略号显示
单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；
文本溢出省略号表示的实现效果: 1.解决单行文字溢出: 解决方式: 在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: n ...
CSS 多行文字溢出显示省略号效果
.box1{width: 100px;/* height: 100px; */border: 1px solid #ccc;overflow: hidden;text-overflow: ellips ...

单行和多行文字溢出省略号显示

单行和多行文字溢出省略号显示相关推荐

最新文章

热门文章