HTML + CSS -> https://jsfiddle.net/cLz7vgxo/
First of all let me tell you I hate web development. It’s so confusing.
I am trying to render a list of emojis here. For context, “shortcode” means the text like :emoji-name: and “keywords” refers the text below the shortcode.
The code I forked from uses a grid to do this. This worked fine in their case. But I would like to show the emoji’s keywords below the shortcode, just as an exercise for myself.
The grid renders fine until the point where the keywords text become too long. In the above example, you can see it with the :wikipedia: emoji. I would like the shortcode and keywords to be to the right of the emoji image but it moves to below the image and because I am a stupid dumb idiot I have no clue how to fix this.
I understand that it’s not possible to show the keywords elegantly if they become too long but I am open to any options like cutting them off with ellipsis, or having a scrollbar, or any other way really. I am not picky. I just need help.
Maybe you can use flexbox or subgrid within the grid elements. text-overflow: ellipsis and white-space: nowrap should be helpful too.
Yeah I think the first think to do is to make the side-by-side layout sort of immutable. Currently the image and text, which compose one cell of the grid, are just
display: inline-blocks. If I do text-overflow ellipsis or hidden for the keywords, the text is still visible anyway.I’m definitely not enough of a css expert to be able to figure it out in a reasonable amount of time. What I shared is just my guess. I do think you want to make sure the three parts are stuck together in that layout somehow, and my guess would be that subgrid would be the best way to do that because one part of the emoji info is above the other part, but I’m not totally sure about that.