css实现标题文字过长截取...

css实现网页中文字过长截取...

title class应该这样写:

.title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

说明:

1、宽度一定要设置,可以根据实际需求调整。

2、white-space:nowrap是禁止文字折行。

3、text-overflow表示当文本溢出时是否显示省略标记,有两个值:

clip:不显示省略标记(...),而是简单的裁切。
ellipsis:当对象内文本溢出时显示省略标记(...)

4、overflow:hidden表示溢出内容为隐藏。

时间: 2024-08-03 09:49:53

css实现标题文字过长截取...的相关文章

css实现文字过长显示省略号的方法

<div class="title">当对象内文本溢出时显示省略标记</div> 这是一个例子,其实我们只需要显示如下长度: css实现网页中文字过长截取... title class应该这样写: .title{ width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 说明: 1.宽度一定要设置,可以根据实际需求调整. 2.white-space:nowrap是禁止文字

2017-3-14文章名 css解决标题背景 不显示文字

2017-3-14文章名 css解决标题背景 不显示文字 标签 text-indent: 100%; white-space: nowrap; overflow: hidden; 隐藏文字 以图代字

关于用css实现的文字超出部分显示省略号

文字超出部分显示省略号还是比较常用的一个效果,最近看到网上的一些方法亲自实践了一下,发现有些以前一些浏览器不能用的属性现在可以用了,于是研究了一番,现总结如下: 我们先来看下HTML代码: <div> <p><span>用css来实现当文字超出宽度时显示省略号的效果</span></p> </div> CSS代码: div{ width: 200px; } span{ display: block; width: 200px; ove

CSS解决无空格太长的字母,数字不会自动换行的问题

其实很简单,代码如下所示,注意 Style: <div class="detail_title" style="word-break: break-all;"><%=StringUtil.toHTML(title) %></div> 默认情况下,一个 DIV或者其他元素的文本,如果都是无文字分隔符,无空格,则不会自动换行,比如: <div class="detail_title" style="

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

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

echart的label标签文字过长显示不全怎么办?

echart的官方只提供label标签文字过长是斜着显示的方式,并且文字显示不全重叠等现象.那么只能自己的方式来实现. option = { title : { text: '世界人口总量', subtext: '数据来自网络' }, tooltip : { trigger: 'axis' }, legend: { data:['2011年', '2012年'] }, toolbox: { show : true, feature : { mark : {show: true}, dataVie

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理 首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历停止所有的效果,从新触发效果就是标题的从左边淡出和背景颜色的变化,当鼠标离开图片后触发一个遍历,停止所有动画标题回到原处不见,背景颜色变回原样 主要的方法 $(".section  ul li").hover(function() //伪类的触发 $(this).find(".r

echars横坐标文字过长挤住

如果横轴坐标文字过长,如一下一样 可以使用换行显示 在xAxis.axisLabel使用formatter回调函数实现换行 axisLabel : {//坐标轴刻度标签的相关设置. formatter : function(params){ var newParamsName = "";// 最终拼接成的字符串 var paramsNameNumber = params.length;// 实际标签的个数 var provideNumber = 4;// 每行能显示的字的个数 var

CSS文本与文字

CSS中长度与颜色 CSS中的文字属性 CSS中的文本属性 14.1 CSS中长度与颜色 长度单位                 说明 in                英寸 cm                公分 mm                公里 cm                以目前字体高度为单位 ex                以小写字母高度为单位(大部分不支持) pt                1pt/72英寸 pc                1pc/12p