如何使用CSS3修剪长链接?
在处理修剪长链接时,我们必须在服务器端做额外的工作,如检查字符串长度,如果长度太长,则添加省略号,但我们可以使用CSS3轻松完成。以下是解决方法:如何使用CSS3修剪长链接?,css,hyperlink,trim,ellipsis,Css,Hyperlink,Trim,Ellipsis,在处理修剪长链接时,我们必须在服务器端做额外的工作,如检查字符串长度,如果长度太长,则添加省略号,但我们可以使用CSS3轻松完成。以下是解决方法: /* Only links with "href" attribute */ a[href] { /* Add ellipsis at the end if text does not fit in given width */ text-overflow: ellipsis; /* Have to add this line
/* Only links with "href" attribute */
a[href] {
/* Add ellipsis at the end if text does not fit in given width */
text-overflow: ellipsis;
/* Have to add this line to make upper line work */
overflow: hidden;
/* Decide what is the longest link width in given units (px, em, rem etc.) */
max-width: 300px;
/* Element has to be inline-block to have width and fit inline in the same time */
display: inline-block;
/* We want to have all the link in one line without wrapping */
white-space: nowrap;
}
这是上面的一个例子:我唯一的建议是为了增强这个答案,为了搜索引擎优化的目的,添加与标题和/或Alt属性相同的链接文本,这样悬停时用户仍然可以看到完整的标题,搜索引擎在链接上有一些额外的上下文。回答得好@Jagi!这省略号是对我们工具箱的一个极好的补充。