Question

在宽度<1的移动设备上400px带下划线的链接，两行中有长文本中断，而第二行则是下划线。

我该如何解决这个问题。

CSS代码：

>>> names['NormName'] =  names['Name'].str.replace(r'^([a-z]).*\s([a-z]+)$', r'\1 \2')
>>> names
           Name    NormName
0    john smith     j smith
1  s r peterson  s peterson
2     sandra oh        s oh

Answer 1

使用此功能，您删除了文字下划线

text-decoration: none;

然后你用a中的一行替换它：之后，这是预期的工作方式，如果你想恢复它，则删除文本修饰和a：after block。

Answer 2

这是因为您将<a>转换为内联块元素。只需移除display: inline-block;应用于<a>的内容即可。

默认情况下，<a>标记是内联元素。因此，无需应用display: inline-block。但是，如果某些<a>标记继承了其他一些显示属性，则必须将display: inline应用/覆盖到<a>元素。

Answer 3

尽管我建议使用前面答案中提到的text-decoration属性，但您可以将链接内容包装在内联元素中并应用一些margin / padding来使用border bottom属性。然后，您可以在一行或多行中为下划线设置动画。

<plugins>

div {
  width: 210px;
}

a {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #1a1a1a;
  text-decoration: none;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  margin-bottom: 20px;
}

span {
  box-sizing: content-box;
  position: relative;
  left: 0;
  border-bottom: 3px solid #1a1a1a;
  transition: all .15s cubic-bezier(.25, .46, .45, .94);
}

a:hover span {
  margin: 0 -10px;
  padding: 0 10px;
  border-bottom-color: navy;
}

下划线长网址

3 个答案: