CSS:带a标签或者说带超链接文本超出部分自动溢出的方法

网上关于网页前端文本超出部分自动隐藏并用省略号表示的方法到处都是。例如本站的：

CSS3属性之text-overflow:ellipsis
http://www.yydy.org:5/forum.php?mod=viewthread&tid=385
(出处: 阳阳得意电脑俱乐部|一个没有广告的纯兴趣爱好网站！)

1、文本没有加上a链接时！效果如下：
CSS：

1. .offer-details h5,
   
2. .offer-details h6 {/*单行文本溢出显示省略写法*/
   
3.         text-overflow: ellipsis;    /*1*/
   
4.         overflow: hidden;           /*2*/
   
5.         white-space: nowrap;        /*3*/
   
6.           word-break: break-all;/*当这一行放不下的时候就直接强制断句了*/
   
7. }

复制代码

html:

1. <h5>{@classname}manufacturing capability manufacturing capability</h5>
   
2. 
   

复制代码

2、但是当你给文本加上a链接后就失效了！效果如下：
html

1. <h5><a href="{@linkurl}">{@classname}manufacturing capability manufacturing capability</a></h5>

复制代码

效果如下：


超出部分虽然被截断了，但是没有省略号了！


怎么解决呢？
    在网页设计中，a标签是最常见的链接标记，它允许我们在页面中插入超链接以引导用户到其他页面或站点。但是，在某些情况下，链接文本可能会超出可用空间。这时，我们需要使用CSS来控制超出部分的大小以保证链接能够适应页面。

代码如下：

1. a {  
   
2. display: inline-block;  
   
3. max-width: 90%;  
   
4. white-space: nowrap;  
   
5. overflow: hidden;  
   
6. text-overflow: ellipsis;  
   
7. padding: 2px 5px;  
   
8. background-color: #eee;  
   
9. border-radius: 3px;  
   
10. }  

复制代码

这段代码定义了a标签的样式，让链接文本在超出可用空间时自动变成省略号。具体来说，我们使用inline-block来让链接显示为内联块级元素，max-width属性来设置最大宽度，white-space属性来防止文本换行，overflow属性来设置超出部分内容的处理方式，text-overflow属性来设置省略号的显示方式。同时，我们还添加了一些额外的样式，比如内边距、背景颜色和圆角边框，以使链接更加美观。 使用上述样式时，可以把链接放在一个固定宽度的容器中，或者设定容器的最大/最小宽度。这样就可以保证链接自适应并且不会破坏页面布局。 总的来说，通过使用这些CSS属性和样式，可以使链接在不同的浏览器和屏幕设备中自适应并且美观。这对于增加网站的可用性和用户体验至关重要。

对于科讯建站而言，可以把控制行数的CSS值直接写在标签里，例如：控制简介显示5行

1. <p style="-webkit-line-clamp: 5; padding:0 0px; ">　　{@intro}...</p>

复制代码