text-overflow:ellipsis

关键字: text-overflow:ellipsis

语法：text-overflow : clip | ellipsis

取值：

clip ：默认值。不显示省略标记(...)，而是简单的裁切.

ellipsis：当对象内文本溢出时显示省略标记(...).

可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .

如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现...

这样写：例如

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#box{width:100px;background-color:#87CEEB;padding:2px 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
</style>
</head>
<body>
<div id="box">锦江之星旅馆有限公司系亚洲规模最大的综合性旅游企业集团</div>
</body>
</html>

注意：overflow: hidden; text-overflow:ellipsis;white-space:nowrap;一定要一起用

1.一定要给容器定义宽度.

2.如果少了overflow: hidden;文字会横向撑到容易的外面

3.如果少了white-space:nowrap;文字会把容器的高度往下撑；即使你定义了高度，省略号也不会出现，多余的文字会被裁切掉

4.如果少了text-overflow:ellipsis;多余的文字会被裁切掉，就相当于你这样定义text-overflow:clip.

如果容器是table，当文字内容过多时，不换行，而是出现...

时间： 2024-08-03 22:51:17

text-overflow:ellipsis的相关文章

微信开发的一些问题

页面禁止缩放: <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1"> 关于禁止横屏: 关于在移动端使用普通的click事件延迟300ms的问题: 1. 将click事件转变成touchstart/touchend事件(手指按下即会触发) ;(function(){ va

CSS3 文本效果(阴影)

CSS3中包含几个新的文本特征. 在本章中您将了解以下文本属性: text-shadow box-shadow text-overflow word-wrap word-break CSS3 的文本阴影 CSS3 中,text-shadow属性适用于文本阴影. 您指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色: <style> h1 { text-shadow: 5px 5px 5px #FF0000; } </style> 1. CSS3 box-shadow属性 CSS3

css3之文本text-overflow 与 word-wrap, word-break

CSS3 Text Overflow属性 CSS3文本溢出属性指定应向用户如何显示溢出内容语法: text-overflow:clip | ellipsis 但是text-overflow只是用来说明文字溢出时用什么方式显示,要实现溢出时产生省略号的效果,还须定义强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果,代码如下: text-overflow:ellipsis; overflow:h

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="Conten

移动端布局的心得

1.字体大小 font-sizepx/em/rem px像素 em:根据父级的字体大小有关,1em表示是父级字体大小一致 rem:根据html标签的字体大小有关,1rem表示和html标签字体大小一致,默认16px, rem:设置 nrem.表示把字体大小设置成和html标签的字体大小n陪,如果html没有设置则默认font-size:16px; 2.自定义字体:字体名字2字体src:url+format <style> @font-face{ font-family:"demo字体

CSS 2 文本⑤

在实际的设计过程中 ,为了排版的好看 ,比如上面这行字 ,经常有这样的需求 ,当放不下的时候,我们会让它显示 ···· 那么这个.... 用css怎么实现呢 ? 我们可以用 text - overflow text - overflow text - overflow : clip | ellipsis clip : 默认值 ellipsis: 省略号 overflow : hidden ; 溢出的时候把它截掉,如果没有这个,溢出的时候不截掉,那text-overflow就不起作用了 wh

常用前端布局，CSS技巧介绍

常用前端布局,CSS技巧介绍对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. 在这个地方可以使用padding来实现,首先,元素的高度=height+padding*2+border*2;所以我们可以将widht设置为0, 然后用padding来实现盒子的高度(若元素padding的值是一个百分比,则是基于其父元素的宽度来计算的) width: 50%; height: 0;

前端面试题-文本溢出显示省略号（...）

一.文本溢出隐藏如下图所示,我们需要对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计的心情) 二.单行文本溢出隐藏 <style type="text/css"> .text { overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } </style> 1. 注意以上设置是单行文本溢出隐藏的3个必须CSS属性,缺一不可. 2. 说明 over

[学习笔记]day02&CSS

一,什么是CSS? Cascading Style Sheets层叠样式表层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的部分共同作用样式表:就是css属性样式的集合 CSS的作用 1. 对html页面进行美化和修饰 2. 将html的内容和样式进行了分离,让文档看起来更清晰 3. 提高代码复用性 ? 1. CSS的选择器(三种) 一,基本选择器(三种) 1.ID选择器 ? (1)id选择器 id唯一性语法:#id的值{css属性}

关于STM8空间不足的解决方法

STM8虽然功能齐全,但是空间不足也是经常出来的情况.要么.text overflow,要么.bss overflow,让人头疼.这里把一些优化方案列出来,让空间得到充分利用: 1.在Project settings下,C Compiler,Optimizations选择Customize 重点是把Split Functions选上. 意思就是只编译用到的函数,不然编译器会很傻地把你用到的C文件里所有函数都编译进去,空间当然不够啦! 2.再到Linker下,Category选择Input 然后看