text-overflow:ellipsis

朱智文

于 2017-02-09 10:27:57 发布

阅读量668

点赞数

分类专栏： html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/u014236541/article/details/54943884

版权

html 专栏收录该内容

5 篇文章

订阅专栏

关键字

: 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.

关键字: text-overflow:ellipsis
语法：text-overflow : clip | ellipsis
取值：
clip ：默认值。不显示省略标记(...)，而是简单的裁切. ellipsis：当对象内文本溢出时显示省略标记(...).
可惜text-overflow 还只是ie的私有属性而已，也没被收录到w3c标准里 .
如果想让某个容器（div或者li或者...块级元素）显示一行文字，当文字内容过多时，不换行，而是出现... 这样写：例如 Html代码

<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，当文字内容过多时，不换行，而是出现... 这样写：例如 Html代码

关键字

: 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.

关键字

: 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.

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。