我可以允许行内块元素跨行拆分吗？

Question

我想在鼠标悬停时放大链接，我尝试使用transform 失败，但后来我发现this answer，看起来很有希望。

但是，将内联元素设为inline-block 似乎也可以防止它被拆分为多行，如下面的sn-p 所示，这可能会为封闭框的短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元素确实可以 这样做。当它们比文本宽度短时如何允许它？

Answer 1

动画 缺失是由于原始链接（标签）元素没有定义transition: 属性。根据positioning documentation here，似乎只有inline-block 适合流动文本并且无法显示换行文本，即使使用 wrap: break-word;展示。 inline-flex、inline-grid 也不起作用，因为它们都是 block 显示类型。

一种解决方案是在某些点断开文本行并设置不同的<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 项本身是 inline-block 可能是一种解决方案。在每个所需 div 的内容上运行 DOM 加载的函数可以做到这一点。这些 div 中所有 a 元素的循环将每个链接转换为单词数组并将数组项放在 ul -> li 中。也许已经有一个jQuery plugin。

轻量级 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>