CSS控制文本超过部分显示省略号(IE)

最新推荐文章于 2022-11-14 16:41:47 发布

iteye_16320

最新推荐文章于 2022-11-14 16:41:47 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： CSS控制文本超过部分显示省略号

本文链接：https://blog.csdn.net/iteye_16320/article/details/81889519

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>a.html</title> 
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>
<link type="text/css" rel="stylesheet" href="wb.css" />
<body>
<div id="new1_2" class="title">
   <a href="http://www.baidu.com" title="百度主页，不超过显示全部">百度</a>
</div>
<div id="new1_2">
   <a href="" title="客户端解决标题显示太长省略多余部分并加省略号的样式">客户端解决标题显示太长省略多余部分并加

省略号的样式</a><br>
   <a href="" title="客户端解决标题显示太长省略多余部分并加省略号的样式">客户端解决标题显示太长省略多余部分并加

省略号的样式</a><br>
   <a href="" title="客户端解决标题显示太长省略多余部分并加省略号的样式">客户端解决标题显示太长省略多余部分并加

省略号的样式</a>
</div>
</body>
</html>

CSS样式

@charset "utf-8";
/* CSS Document */
#new1_2 {
margin-top: 20px;/* 距页面顶部距离 */
margin-bottom: 20px;/* 距页面底部距离 */

width:200px;/* 宽度 */
overflow:hidden;/* 多出部分隐藏 */
white-space:nowrap;/* 不换行 */
}
#new1_2 a,#new1_2 a:hover {
font-size: 13px;/* 字号 */
line-height: 20px;/* 链接之间的高度 */
color: #000000;/* 字体颜色 */
text-decoration: none;/* 去掉下划线 */
padding-left: 10px;/*距左边界位置*/

width:200px;/* 宽度 */
overflow:hidden;/* 多出部分隐藏 */
text-overflow:ellipsis;
}
#new1_2 a:hover {
color: #660000;
padding-left: 30px;/*距左边界位置*/

width:200px;/* 宽度 */
overflow:hidden;/* 多出部分隐藏 */
text-overflow:ellipsis;
}

补充

<DIV STYLE="width: 120px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis">
<NOBR>就是比如有一行文字，很长，表格内一行显示不下.</NOBR>
</DIV>

iteye_16320

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS控制文本超过部分显示省略号(IE)

HTML页面代码&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;a.html&lt;/title&gt; &lt;meta http-equiv="keywords" content
复制链接

扫一扫