Can I allow inline-block elements to split across lines?

user_5825294 0
Viewed 112

I'd like to have links zoom in when the mouse hovers on them, I've tried with transform unsuccessfully, but then I found this answer, which looked promising.

However, making an inline element an inline-block also seems to prevent it from being split across several lines, as shown in the snippet below, which can create very unpleasant results for short width of the enclosing box.

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>

On the other hand, in this specific example above I see that the first link is so long that it does split across lines, so it looks like inline-block elements can indeed do that. How can allow it when they are shorter than the text width?

text-width word-wrap css html
1 Answers

The animation missing is due to the original link (a tag) element not having the transition: property defined. Per the positioning documentation here it seems only inline-block is suitable for flowing text and that fails to show wrapped text, even with wrap: break-word; present. The inline-flex, inline-grid don't work either since they are both block display types.

One solution would be to break the text lines at certain points and setting different <br> elements to show at different @media widths for certain page widths/devices. However the inline-block elements cannot wrap like normal text, so the breaks just end up making it a 2-line block in the middle of the text.

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>

Some JS scripting

A breaking up of the line into blocks in a ul list with the li items being inline-block themselves could be a solution. A function to run at DOM load on each desired div's contents could do this. A loop for all a elements in those divs that transform each of the links into an array of words and puts the array items in a ul -> li. Perhaps there is a jQuery plugin for this already.

Light JS example

(not complete code, but using querySelectorAll, which could be used to gather the links from a <div> with a class you put as the function input):

<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>
user_36803350
Related