设为首页
收藏本站
开启辅助访问
切换到宽版
登录
立即注册
快捷导航
发布信息
搜索
搜索
导读
Guide
最新
标签
论坛
BBS
导购
Group
关于我们
About US
本版
帖子
用户
阳阳得意电脑俱乐部|一个没有广告的纯兴趣爱好网站!
»
论坛
›
社区管理
›
建站日志
›
CSS:带a标签或者说带超链接文本超出部分自动溢出的方法 ...
返回列表
发新帖
CSS:带a标签或者说带超链接文本超出部分自动溢出的方法
[复制链接]
40
|
1
|
2024-3-9 15:45:49
|
显示全部楼层
|
阅读模式
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要
登录
才可以下载或查看,没有账号?
立即注册
×
网上关于网页前端文本超出部分自动隐藏并用省略号表示的方法到处都是。例如本站的:
CSS3属性之text-overflow:ellipsis
http://www.yydy.org:5/forum.php?mod=viewthread&tid=385
(出处: 阳阳得意电脑俱乐部|一个没有广告的纯兴趣爱好网站!)
1、文本没有加上a链接时!效果如下:
CSS:
.offer-details h5,
.offer-details h6 {/*单行文本溢出显示省略写法*/
text-overflow: ellipsis; /*1*/
overflow: hidden; /*2*/
white-space: nowrap; /*3*/
word-break: break-all;/*当这一行放不下的时候就直接强制断句了*/
}
复制代码
html:
<h5>{@classname}manufacturing capability manufacturing capability</h5>
复制代码
2、但是当你给文本加上a链接后就失效了!效果如下:
html
<h5><a href="{@linkurl}">{@classname}manufacturing capability manufacturing capability</a></h5>
复制代码
效果如下:
超出部分虽然被截断了,但是没有省略号了!
怎么解决呢?
在网页设计中,a标签是最常见的链接标记,它允许我们在页面中插入超链接以引导用户到其他页面或站点。但是,在某些情况下,链接文本可能会超出可用空间。这时,我们需要使用CSS来控制超出部分的大小以保证链接能够适应页面。
代码如下:
a {
display: inline-block;
max-width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 2px 5px;
background-color: #eee;
border-radius: 3px;
}
复制代码
这段代码定义了a标签的样式,让链接文本在超出可用空间时自动变成省略号。具体来说,我们使用
inline-block
来让链接显示为
内联块级元素
,
max-width
属性来设置最大宽度,
white-space
属性来防止文本换行,
overflow
属性来设置超出部分内容的处理方式,
text-overflow
属性来设置省略号的显示方式。同时,我们还添加了一些额外的样式,比如内边距、背景颜色和圆角边框,以使链接更加美观。 使用上述样式时,可以把链接放在一个固定宽度的容器中,或者设定容器的最大/最小宽度。这样就可以保证链接自适应并且不会破坏页面布局。 总的来说,通过使用这些CSS属性和样式,可以使链接在不同的浏览器和屏幕设备中自适应并且美观。这对于增加网站的可用性和用户体验至关重要。
CSS
,
text-overflow
相关帖子
•
CSS:关于英文网站的内容自动换行问题
•
如何在word 里插入代码
•
CSS3属性控制文本显示行数,溢出自动加省略号
•
Bootstrap 中如何让图片居中 center-block
回复
使用道具
举报
yydy
|
2024-3-12 17:16:36
|
显示全部楼层
对于科讯建站而言,可以把控制行数的CSS值直接写在标签里,例如:控制简介显示5行
<p style="-webkit-line-clamp: 5; padding:0 0px; "> {@intro}...</p>
复制代码
回复
支持
反对
使用道具
举报
返回列表
发新帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
yydy
354
主题
161
回帖
3041
积分
管理员
积分
3041
加好友
发消息
回复楼主
返回列表
建站日志
WordPress学习笔记
图文推荐
如何通过网络快速实现远程电脑服务-RdViewer篇
2024-08-15
一站式网上银行客户端下载
2024-07-26
电视家升级版5.0
2024-06-30
Epson cb-x27投影仪网络投影方法
2024-06-24
一款免费纯净听歌软件 方格音乐
2024-06-06
热门排行
1
Office Tab v12.0.0.228 企业版破解版
2
Iobit Uninstaller 中文特别版(彻底卸载不需要的软件)
3
Adobe photoshop cc 2015中文特别版(最适合Win7)
4
StartIsBack+1.5.1 简体中文注册版
5
常用软件一键安装包 纯净无广告(更新至2021年10月)
6
弹窗:你的office许可证有问题
7
3秒解决打印机共享连接时0x0000011b错误
8
StartAllBack v3.8.4.5136 Win11开始菜单免激活直装版