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

  <div>hghghhgghghghhghghgghghhg</div>

  css:div{width:100px;}

  超长部分省略号显示:/*超出部分不显示*/overflow: hidden;
                      /*超出部分省略号显示*/text-overflow: ellipsis;

  注:如果div中的内容存在空格,则会自动换行  阻止自动换行:white-space: nowrap;

时间: 2024-10-05 11:48:05

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

常用css样式(文字超出部分用省略号显示、鼠标经过图片放大、出现阴影)

文字超出部分用省略号显示: white-space: nowrap; /* 不换行 */ overflow: hidden; /* 超出部分不显示 */ text-overflow: ellipsis; /* 超出部分显示为... */ 鼠标经过图片放大 .team-img img{ width:188px; height: 200px; border-radius: 50%; transition: all 1.2s; -moz-transition: all 1.2s; -webkit-tr

文字超长省略号显示

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

文字超出两行用省略号显示

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 width: 200px; 9 overflow: hidden; 10 text-overflow: ellipsis; 11 display: -webkit-

Android 文字过长TextView如何自动截断并显示成省略号

当用TextView来显示标题的时候,如果标题内容过长的话,我们不希望其换行显示,这时候我们需要其自动截断,超过的部分显示成省略号. 如下图所示,标题过长,自动换行了,显示不是很好看. 这时候我们需要其自动截断,超过的部分显示成省略号. xml布局里需要将textview的下面属性设置下: android:ellipsize="end" android:singleLine="true" 其中:android:ellipsize="start"-

label.lineBreakMode设置lable中文字过长时的显示格式,其中可以有末尾以省略号显示。

iOS4.0版本: label.lineBreakMode = NSLineBreakByCharWrapping;以字符为显示单位显示,后面部分省略不显示. label.lineBreakMode = NSLineBreakByClipping;剪切与文本宽度相同的内容长度,后半部分被删除. label.lineBreakMode = NSLineBreakByTruncatingHead;前面部分文字以……方式省略,显示尾部文字内容. label.lineBreakMode = NSLine

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

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

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

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

如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  ,其属性规定当文本溢出包含元素时发生的事情.语法如下: text-overflow: clip|ellipsis|string; 代码如下: <!DOCTYPE html><html><head><meta http-equiv="Content-Type&q

html使用css让文字超出部分用省略号三个点显示的方法案例

html使用css让文字超出部分用省略号三个点显示的方法: 我正确使用的就是下面的代码,li里面是a标记.在IE和google中使用是正常的,火狐不知道,我也不在意,等你来测 li{ display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis; } 直接拿这个css样式去用吧,编程嘛,解决就好,不用看下面的了. 语法: text-overflow : clip | elli