将过长的文字改用省略号显示

今天项目中有段过长的文字分成几行不美观，于是就想起了能用省略号代替的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width: 150px;
            border: 1px solid #ccc;
            text-overflow: ellipsis;/*超出的文字用省略号代替*/
            white-space: nowrap;/*禁止换行*/
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div>kobekobekobekobekboek boekboekberofd fdsfdsfsdfsdfsdf</div>
</body>
</html>

text-overflow这个属性需要和overflow和white-space配合使用才会有效果。

时间： 2024-10-12 17:38:14

将过长的文字改用省略号显示的相关文章

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

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

文字超长省略号显示

有的时候,会有超长数据存在而导致显示框装不下的情况. 最开始遇到这种问题时,并不知道 css 中有简单的超长文字省略号显示样式设置,所以进行了很麻烦的 js 操作,记得是使用的 d3 插件绘制树形图,然后获取当前显示框宽度,获取文字大小,计算数据的总共长度,判断是否超长,超长后要减去三个小数点的长度,再对能显示部分数据的截取,拼接三个小数点,达到这种效果,现在想想,真是觉得当初好稚嫩,不过动动脑子处理问题也觉得挺有意思的呢! css 文字超出隐藏设置很简单: 1.有一个最大宽度:max-widt

div内文字显示两行，多出的文字用省略号显示

用-webkit-私有属性,代码如下:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; 另外还有其他方法可以解决这个问题:1.通过js来控制字数,然后截取文字下面是一个例子: <!DOCTYPE html><html><head&

文字超出省略号显示

一行 div{ width:100px;/*一定要写*/ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } 来源于 http://blog.csdn.net/u011546766/article/details/34446737 多行 google浏览器 div{ overflow:hidden; text-overflow:ellipsis; display:-webkit-bos; -webkit-line-clam

多行文字内容溢出显示点点点（...）省略号

1.常规css方法——使Firefox以外主流浏览器文字溢出省略号表示下图为此常用方法在各个浏览器下的表现: IE6浏览器下 IE7浏览器下 chrome谷歌浏览器下 Safari浏览器下 opera浏览器下 Firefox火狐浏览器下可以看到,仅在Firefox火狐浏览器下无法实现文字溢出省略号表示,其文字直接从中间咔掉了.综合考虑代码成本,表现效果,我个人觉得这样子已经算是不错的了,追求完美和实际效益之间要追求一定的平衡.如果页面上很多文字都溢出,则需要寻求更兼容的方法,要是偶尔会出现文

CSS自动截断表格内的长字符以省略号显示

CSS自动截断表格内的长字符,以省略号显示,大家可能在一些网站看到过这样的效果,目的是让表格或布局更美观一些,但是不利于阅读,如果您可以能该属性加上title或链接的话那就利于网站体验了,您说是吗? <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上谷战

过长文字自动换行或者超长省略号显示

<div>hghghhgghghghhghghgghghhg</div> css:div{width:100px;} 超长部分省略号显示:/*超出部分不显示*/overflow: hidden; /*超出部分省略号显示*/text-overflow: ellipsis; 注:如果div中的内容存在空格,则会自动换行阻止自动换行:white-space: nowrap;

android中Textview 和图片同时显示时，文字省略号显示，图片自动靠到右边

很纠结的一个标题,实在是不知道怎么去描述这个现象. 上图片吧,先看看需求是什么样的. 1.需求: ? 视频与票的图标跟在标题后面显示,当标题过长时icon显示到省略号…后(textview省略号显示,图标自动靠后). 2. 问题解决 ? 本来是一个很正常的需求,看起来很简单,但是做起来却遇到了很蛋疼的问题,怎么搞的都不行,堵了很长时间,下面说一下解决方案,遇到这样问题的朋友可以使用. TextView可以通过 android:ellipsize="end" android:single

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

只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ overflow: hidden; } css文字超出自动显示省略号显示省略号 css文字超出自动显示省略号 css文字超出自动显示省略号显示省略号 02.针对table table{ table-layout:fixed; } table td{ word-break:keep-all;/* 不换行