css文本超出div隐藏剩下内容并显示省略号

单行文本

<style>.test {width: 300px;height: 30px;line-height: 30px;border: 1px solid black;white-space: nowrap;//强制在单行显示overflow: hidden;text-overflow: ellipsis;//关键}
</style>
<body>
<div class="test"> <span>这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容这里是文本内容</span>
</div>
</body>

效果图

多行文本(火狐没效果)

<style>.children-school-content{width: 195px;font-size: 10px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;   }
</style>
<body><div><p class="children-school-content">胡那英据了哈哈很快恢复喝咖啡很简单回复肯定会很深刻的划分空间的喝咖啡和空间的划分哈萨克返回看得见可适当减肥后肯定会发空间哈萨克发动机后方可恢复开放解饿哦就我几个几个了解</p></div>
</body>

效果图：

兼容火狐写法，使用伪元素。

<style>ul {width: 300px;margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #eee;}li { margin: 12px 0;}li a {display: block;width: 81px;overflow: hidden;/*注意不要写在最后了*/white-space: nowrap;color: #000;}li:not(p) {clear: both;}li:not(p) a {max-width: 170px;float: left;}li:not(p):after {content: "...";float: left;width: 27px;padding-left: 5px;color: #000;}
</style>
</head><body><ul>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
<li><a href="#">这里是文本内容</a></li>
</ul></body>

效果图：

css文本超出div隐藏剩下内容并显示省略号相关推荐

前端css 文本超出就隐藏并且显示省略号
目录文本超出加省略号单行文本溢出显示省略号多行文本超出隐藏单词超出加省略号单行单词溢出显示省略号多行单词溢出显示省略号跨浏览器兼容的方案表格中单行超出隐藏文本超出加省略 ...
css 文本超出就隐藏并且显示省略号
overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; //溢出不换行 //上面是一行内容的 ...
CSS笔试题-不超过三行显示全部内容，超过三行隐藏剩余内容并显示省略号
<style>ol {overflow: hidden;/* 向用户发出未显示的溢出内容的信号: */text-overflow: ellipsis;display: -webkit-bo ...
CSS中文本超出部分隐藏并用省略号代替
CSS中文本超出部分隐藏并用省略号代替这种在开发过程中经常遇到,这种只需要css三行代码就可以实现首先先写好基本的结构 <div> <p>今天天气很好,适合出去玩耍,不要再打 ...
CSS文本超出显示省略号
CSS文本超出显示省略号 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
html div文本自动换行,div里面的内容自动换行
div自动宽度,怎么让里面的文字自动换行从网上找了一下,下面的内容可以参考兼容 IE 和 FF 的换行 CSS 推荐样式最好的方式是 word-wrap:break-word; overflow ...
CSS如何让div隐藏？
在我们平时布局网站的时候,想要把div进行隐藏,但是很多人不知道css控制div显示隐藏?下面我们来讲解一下css如何让div隐藏. 1.使用display:none来隐藏div 我们可以使用disp ...
html文字...点击后全部显示,js 文字超出部分隐藏、点击显示更多示例
这篇文章主要为大家详细介绍了js 文字超出部分隐藏.点击显示更多示例,具有一定的参考价值,可以用来参考一下. 感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随512笔记的小编罗X来 ...
html隐藏文字点击查看更多,js 文字超出部分隐藏、点击显示更多示例
感兴趣js 文字超出部分隐藏.点击显示更多示例的小伙伴,下面一起跟随编程之家 jb51.cc的小编来看看吧. css: *{ padding: 0; margin: 0; } .text-hide{ ...
html图片超出内容隐藏,图片按比例缩小，溢出超出DIV边框的内容自动隐藏方法！...
这几天在学习百度搜索结果出现缩略图的方法,百度PC的缩略图比例:121:75,我的文章列表页的比例为121:54,比例相差太大,所以最近的文章缩略图基本没有. 而如果将列表图片改为121:75比例后, ...

css文本超出div隐藏剩下内容并显示省略号

css文本超出div隐藏剩下内容并显示省略号相关推荐

最新文章

热门文章