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

最近才知道css也有这么叼炸天的一面~~~

做个类似论坛的页面,用户头像70px,但是用户名没法限定啊,英文中文都可以,你说他要是取个“我的名字好长呀,你该怎么办呢”,那老衲不就蛋疼菊花紧了~~

幸好,老衲于不幸中的万幸中发现了css这么叼炸天的一面,以前一直不知道,写出来分享给大家

很简单,大屁不多放,直接开菊花:

css里面如下设置:

a.name{
	line-height: 30px;
	text-align: center;
	text-overflow:ellipsis;//让超出的用...实现
	white-space:nowrap;//禁止换行
	overflow:hidden;//超出的隐藏
	display: block;
}

我是用a标签写的用户名,所以要display:block一下。

唔,很简单,不过很好用。

(PS:不支持IE6!)

有任何指教,请加QQ:1740437

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

时间: 2024-08-05 19:28:45

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

Javascript: 截取字符串多出来并用省略号[...]显示

/背景知识/ substring 方法用于提取字符串中介于两个指定下标之间的字符 substring(start,end) 开始和结束的位置,从零开始的索引 参数描述 start 必需.一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置.stop 可选.一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1.如果省略该参数,那么返回的子串会一直到字符串的结尾. 返回值 一个新的字符串,该字符串值包含 stringObject 的一

文字截取,多余文字用省略号(...)代替

CSS方法: <!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="C

文字超长省略号显示

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

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

今天项目中有段过长的文字分成几行不美观,于是就想起了能用省略号代替的方法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> div{ width: 150px; border: 1px sol

Js自动截取字符串长度,添加省略号“……”

JavaScript字符串处理函数,根据定义的长度截取字符串,超出部分裁掉追加……,很多时候网页上显示的内容需要缩成“...”该方法用于处理字符串显示固定长度,超长部分用“...”代替: /**参数说明: * 根据长度截取先使用字符串,超长部分追加… * str 对象字符串 * len 目标字节长度 * 返回值: 处理结果字符串 */ function cutString(str, len) { //length属性读出来的汉字长度为1 if(str.length*2 <= len) { ret

css截取字符串,多余部分用省略号显示

通常的我们在读取文章标题的时候,遇到字符过多,都是通过程序在SERVER端截取一定的字符数,然后添加...来实现标题长度截取的.其实我们也可以通过CSS来控制. 实列如下: .title { width:200px; white-space:nowrap; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; } 可用span或div引用,例如: <span class="title">客户端解决标题显示

【CSS笔记】使文字在一行显示,超出部分用省略号显示

CSS代码: text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 说明: text-overflow:用来设置是否使用一个省略标记(···)标示对象内文本的溢出. white-space:nowrap;强制文本在一行内显示. overflow:hidden;溢出内容为隐藏. 必须三者同时用的时候才会实现溢出文本显示省略号 附:多行显示的方法: overflow: hidden; text-overflow: ellipsis;

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&

Css 截取字符串长度

.shortNameShow{ overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; white-space:nowrap; } 1.overflow:hidden;隐藏多余的内容 2.text-overflow:ellipsis; 语法 text-overflow: clip|ellipsis|string; 值 描述 clip 修剪文本. ellipsis 显示省略符号来代表被修剪的文本. string 使用给