1

当鼠标悬停在链接上时，我想放大链接，我尝试过transform不成功，但后来我找到了这个答案，看起来很有希望。

但是，将内联元素设置为 aninline-block似乎也可以防止它被拆分为多行，如下面的代码片段所示，如果缺少width封闭框，这可能会产生非常令人不快的结果。

div {
  border: 1px solid black;
  text-align: justify;
  width: 20em;
}

a {
  text-decoration: none;
  display: inline-block;
}

a:hover {
  transform: scale(1.01);
}
<div>
<p>Today, <a href="https://github.com/Aster89/WinZoZ">my
  Vim plugin for easy window navigation</a>, which I named
<a href="https://nonciclopedia.org/wiki/Windows">WinZoZ</a>,
has got its first star! Given <a
  href="https://stackoverflow.com/questions/69007954/vim-remap-ctrl-w-in-insert-mode-to-behave-as-it-does-in-normal-mode#comment121984179_69007954">this
  comment on StackOverflow</a>, the star is from the user <a
  href="https://stackoverflow.com/users/3271687/yolenoyer">@yolenoyer</a>.
</p>
</div>

另一方面，在上面这个具体的例子中，我看到第一个链接太长了，它确实跨行分割，所以看起来inline-block元素确实可以做到这一点。当它们比文本宽度短时如何允许它？

4

1 回答 1

0

缺少动画是由于原始链接（标签）元素没有transition:定义属性。根据此处的定位文档，它似乎只inline-block适用于流动文本并且无法显示包装文本，即使使用 wrap: break-word; 当下。,也不起作用，因为它们都是inline-flex块显示类型。inline-grid

一种解决方案是在某些点断开文本行，并<br>为某些页面宽度/设备设置不同的元素以不同的@media 宽度显示。然而，inline-block元素不能像普通文本一样换行，所以中断最终使它成为文本中间的 2 行块。

div {
  border: 1px solid black;
  /* text-align: justify; */
  width: 20em;
}

a {
  text-decoration: none;
  /* new */
  transition: transform .15s; /* Animations: "transform" on a-tag must be present */
  display: inline-block;
}

a:hover {
  transform: scale(1.01); /* then we transform the transition here */
  -ms-transform: scale(1.01); /* IE 9 */
  -webkit-transform: scale(1.01); /* Safari 3-8 */

}
<div>
<p>Today, <a href="https://github.com/Aster89/WinZoZ">my
  Vim plugin for easy window navigation</a>, which I named
<a href="https://nonciclopedia.org/wiki/Windows">WinZoZ</a>,
has got its first star! Given <a
  href="https://stackoverflow.com/questions/69007954/vim-remap-ctrl-w-in-insert-mode-to-behave-as-it-does-in-normal-mode#comment121984179_69007954">this
  comment on StackOverflow</a>, the star is from the user <a
  href="https://stackoverflow.com/users/3271687/yolenoyer">@yolenoyer</a>.
</p>
</div>

一些 JS 脚本

将行分解为ul列表中的块，其中 li 项本身是内联块，这可能是一种解决方案。在每个所需 div 的内容上运行 DOM 加载的函数可以做到这一点。这些 div 中所有a元素的循环将每个链接转换为单词数组并将数组项放入ul -> li. 也许已经有一个jQuery 插件。

轻量级 JS 示例

（不是完整的代码，而是使用querySelectorAll，它可以用来从一个<div>你作为函数输入的类收集链接）：

<script type="text/javascript">
    
    // function to look for a-tags in a DIV with a specific class
    function linkToList(inputDivClass) { 

        // get the links inside the div with the input div class
        const allLinks = document.querySelectorAll("div." + inputDivClass + " > a");

        for (var i = allLinks.length; i < 0; i++) {
            // here we go through the links returned from the div... 
        }

        // then go through the data and see what to put where...        
    }


    // when dom is loaded we run the function that looks for the divs with the a-tags...
    document.addEventListener("DOMContentLoaded", linkToList(inputDivClass) );


</script>
于 2021-10-14T21:07:39.723 回答