Question

考虑你想要用一个链接到一定数量的线来标题。当行夹紧链接时，Chrome倾向于更快地放置椭圆并以链接文本的最后部分结束。我发现避免这种情况的唯一方法是将链接环绕标题并仅夹住标题，或者在链接内添加一个跨度并将其夹紧。

设置基本上是这样的：

<head><style>
.box { width: 22%; float: left; margin: 0 1.5%; }
.clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style></head>
<body>
  <div class="box">
    <h2><a class="clamp" href="#">Some title that could do with some clamping, because look, it just keeps on going and going there's no end to it, or at least not one I can see coming up any time shortly.</a></h2>
  </div>
  <div class="box">
    <h2 class="clamp"><a href="#">Some title that could do with some clamping, because look, it just keeps on going and going there's no end to it, or at least not one I can see coming up any time shortly.</a></h2>
  </div>
  <div class="box">
    <a href="#"><h2 class="clamp">Some title that could do with some clamping, because look, it just keeps on going and going there's no end to it, or at least not one I can see coming up any time shortly.</h2></a>
  </div>
  <div class="box">
    <h2><a href="#"><span class="clamp">Some title that could do with some clamping, because look, it just keeps on going and going there's no end to it, or at least not one I can see coming up any time shortly.</span></a></h2>
  </div>
</body>

你会注意到前两个例子有“一些标题......很快就会有时间”，而第二个例子则更像是“有些标题可以......”。

是否有任何隐藏属性可以控制此属性，并且链接上的默认值与其他任何元素不同？

是否有秘密的方法来控制-webkit-line-clamp如何处理链接？

0 个答案: