span 超过一定的长度显示...

最新推荐文章于 2023-06-14 11:18:15 发布

ljw520204

最新推荐文章于 2023-06-14 11:18:15 发布

阅读量2.5w

点赞数

分类专栏： java jsp js 文章标签： xhtml class css server html 网络

本文链接：https://blog.csdn.net/ljw520204/article/details/7621824

版权

js 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

java

14 篇文章 0 订阅

订阅专栏

jsp

13 篇文章 0 订阅

订阅专栏

1.把文字部分单独再加个层
如：
<a><span>文字文字文字文字文字文字文字文字</span> 更多</a> 
把宽高设定好。
然后前面一个的span的css样式里加上一个overflow:hidden;  则超出部分隐藏。
后面加上更多就行了。

2.			<!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="Content-Type" content="text/html; charset=utf-8" />
<title>CSS省略号代码</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#ididid{
position:relative;
width:150px;
height:20px;
line-height:20px;
text-overflow:ellipsis;
white-space:normal;
*white-space:nowrap;
overflow:hidden;
border:1px solid #999;
}
#ididid span{
position:absolute;
top:0;
right:0;
display:block;
float:left;
}
#ididid span:after{content:"...";}
</style>
</head>
<body>
<div id="ididid">易网时代——电脑教程丰富的网络学院<span></span></div>
</body>
</html>			
 
 
 
 
 3.css控制文字显示长度，超过用省略号替代通常的我们在读取文章标题的时候，遇到字符过多，都是通过程序在SERVER端截取一定的字符数，然后添加…来实现标题长度截取的。其实我们也可以通过CSS来控制。实列如下：.title{width:200px;white-space:nowrap;word-break:keep-all;overflow:hidden;text-overflow:ellipsis;} 可用span或div引用,例如:<span class=title>客户端解决标题显示太长省略多余部分并加省略号的样式</span><div class=title>客户端解决标题显示太长省略多余部分并加省略号的样式</div> 以上2例显示在超过样式定义的200px宽度后,后面的字符将被…替换.

ljw520204

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
span 超过一定的长度显示...

1.把文字部分单独再加个层如：文字文字文字文字文字文字文字文字更多把宽高设定好。然后前面一个的span的css样式里加上一个overflow:hidden; 则超出部分隐藏。后面加上更多就行了。 2. CSS省略号代码*{margin:0;padding:0;}body{padding:10px;font-fam
复制链接

扫一扫