html - 溢出的 anchor 元素不可见完整轮廓

Question

我有固定宽度的 p 标签中包含的 anchor 标签。 p 标签的 css textoverflow: ellipsis, overflow : hidden 。 当焦点在 anchor 标签上并且内容溢出时，即 a 有一个长字符串，右边的轮廓不可见

我可以添加什么属性来使正确的轮廓或边框在 anchor 标记的焦点上可见？

Answer 1

你可以试试这个 jsfiddle :

HTML

<p><a href="">VERY LONG TEXT AAAAAAAAAAAAARRRRRRRRRGGGGGGGGGGGHHHHHHHH</a></p>

CSS

p {
  background: #dedede;
  width: 200px;
  text-overflow: ellipsis; 
  overflow : hidden;
}   

p:focus-within {
  overflow : initial;
}