溢出用省略号显示

overflow:hidden; //超出的文本隐藏
text-overflow:ellipsis; //溢出用省略号显示
white-space:nowrap; //溢出不换行

//上面是一行内容的时候,当有两行的内容时候

overflow: hidden;
text-overflow: ellipsis;
display:-webkit-box; //作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
-webkit-line-clamp:2; //显示的行

原文地址:https://www.cnblogs.com/liushunli/p/10393250.html

时间: 2024-10-10 21:36:20

溢出用省略号显示的相关文章

单行文本和多行文本溢出以省略号显示方法

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> .inaline{ overflow: hidden; white-space:nowrap;   //单行显示溢出以省略号显示方法 text-overflow: ellip

文本溢出用省略号显示

文本溢出,分为单行文本溢出以及多行文本溢出, 单行文本溢出css代码如下: 1 p{ 2 overflow: hidden;//超出部分隐藏: 3 white-space: nowrap;//强制不换行: 4 text-overflow:ellipsis;//超出部分用省略号显示: 5 } 多行文本溢出css代码如下: 1 div{ 2 overflow: hidden; 3 text-overflow: ellipsis; 4 display: -webkit-box; 5 -webkit-l

多行溢出 ,文本显示为省略号如何写

多行溢出 ,文本显示为省略号怎么写? 我想请问下,多行溢出 ,文本显示为省略号怎么写啊??555一行的可以,多行的就不行了哇~ ------解决思路----------------------用js获得一下这个div里文字的个数,当超过一定数量后substring一下,在加个...覆盖div原来的值试试貌似专门有个样式实现这个功能 忘掉了 ------解决思路----------------------设定一个宽度:设置css样式: text-overflow:ellipsis; white-s

【转】如何用css限制文字长度,使溢出的内容用省略号…显示

文章转自这里http://blog.0755hqr.com/post-597.html ps:因在该地方没看到转载按钮,复制下存到这里以待自己方便,别人能看到帮助一下更是乐意之至,效果亲测可以实现,兼容IE.谷歌.火狐 由于文字内容长度的不确定,而网页的布局精确性,如果文字内容超出限定的区域(div,span等),会使页面变形.为了满足页面的布局合理,用css样式自动限制文字长度,使溢出内容用省略号…显示. 限制文字长的css样式如下: .text_overflow{ width:320px;

CSS控制LI行字符溢出用省略号代替

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

css中text-overflow:ellipsis文本溢出产生省略号

text-overflow : clip | ellipsis 参数: clip : 不显示省略标记(...),而是简单的裁切 (PS:clip这个参数是不常用的!) ellipsis : 当对象内文本溢出时显示省略标记(...) text-overflow属性仅是注解,当文本溢出时是否显示省略标记.并不具备其它的样式属性定义. 想要实现溢出文本时产生省略号的效果: 必须定义:1.强制文本在一行内显示(white-space:nowrap):                 2.溢出内容为隐藏(

文本字数过多时,以省略号显示

# 文本字数过多时,以省略号显示 1.对于table中单元格中的字符数超过限定的宽度时,以省略号显示,但是当鼠标悬浮在上面时,能够完整地显示出单元格的内容.设置表格的标头中字符数限制(让标头单元格宽度固定)```style#dataTab{table-layout: fixed}#dataTab th{width:80px;white-space: nowrap; //设置如何处理元素内的空白word-break:keep-all;//换行规则//normal 使用浏览器默认的换行规则.//br

CSS截取字符串,多余文字用省略号显示

最近才知道css也有这么叼炸天的一面~~~ 做个类似论坛的页面,用户头像70px,但是用户名没法限定啊,英文中文都可以,你说他要是取个"我的名字好长呀,你该怎么办呢",那老衲不就蛋疼菊花紧了~~ 幸好,老衲于不幸中的万幸中发现了css这么叼炸天的一面,以前一直不知道,写出来分享给大家 很简单,大屁不多放,直接开菊花: css里面如下设置: a.name{ line-height: 30px; text-align: center; text-overflow:ellipsis;//让超

CSS实现div内文字显示两行,超出两行部分省略号显示

在搭建前台文章列表中,需要实现div内文字显示两行,超出的则省略号显示. 找了很多,都貌似只能一行显示.最后在百度知道找到答案. 答案转自百度知道,题主的自答. 用的是-webkit-私有属性.text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 另有回