Column-count weird wrapping issue

[LLLLLLL]

Check out the (very incomplete new) website at http://mainlypiano.com/artists

 

I'm using column-count of 3 (or 2 based on responsive size).

 

On a normal desktop screen, you can type artist text in the search box, and the filter works just fine. The results stay in the columns and that's just fine. But if the screen is narrower (about 660px, for example) and you search for one of the longer names...

- fiona

- saen

 

... you'll see that the ONE entry that is available has its text split over the two columns. I don't want that. I'm also curious why the text of the second column displays higher than the first column text after typing those names.

 

Not sure what I can do to make the text stay in one column. The A element is already a BLOCK style, so why the heck would it wrap into that column?

 

I don't do much with column-count, but I don't know why it would be special. Or especially weird. 

 

Ideas? Thank you.

[Psycho]

There are two aspects that cause this problem:

 

1) As the page gets thinner, so do the columns. When that happens the records with the longer names no longer fit into a column. Before you filter the records, if you make the page narrower, the record "Fiona Joy (aka Fiona Joy Hawkins)" won't fit on a single line and has a line break. However, it stays in the same column only because the columns are so long. If it was the record at the end of the column, it could very well be in two columns.

 

2) Once the page is filtered with just the long records - if the record needs to break across several lines due to a narrow page, the following lines of text will naturally flow to the next column.

 

Within the artist.css file, find the definition for "#artist_page .artist_full_list a" and add an entry for the "break-inside" property

 

 

#artist_page .artist_full_list a {
  display: block;
  padding: 4px;
  break-inside: avoid-column; /* ADD THIS */
  /*margin: 0 10px 2px 0;*/
}

 

That should make sure that the anchor tags do not flow across multiple columns. It worked on a test page from your code, but I didn't try a lot of different configurations in data.

[LLLLLLL]

break-inside: avoid-column;

 

That is quite excellent information. Like I said, I'm new to column-count, so I didn't know little things like this. Quite perfect, thank you!

[Psycho]

break-inside: avoid-column;

 

That is quite excellent information. Like I said, I'm new to column-count, so I didn't know little things like this. Quite perfect, thank you!

 

I had no clue that such a CSS property even existed. I just implemented good debugging skills to identify the problem. Then used Google to find a solution. Being a good programmer is not about remembering everything - it's about being able to find a solution.

 

FYI: To identify the problem I put a border around the outside div and a different color border around the anchor tags. When doing that, I was able to "see" what was happening with the rendered content as the page was re-sized. Then I simply did a Google search for "Prevent text breaking across columns". The very first result gave me the answer.

[LLLLLLL]

It looks like this isn't a mainstream property: https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

 

I know how to use Google, thanks. I just didn't use the proper phrases to get me a result.

[Psycho]

It looks like this isn't a mainstream property: https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside

 

I know how to use Google, thanks. I just didn't use the proper phrases to get me a result.

 

I wasn't implying you didn't know how to use Google. I didn't know what the problem was at first. What I was trying to highlight was that the key was to identify the source of the problem. It was only by adding additional elements (in this case borders) that allowed me to clearly see what the cause was. Only then was I able to do a Google search with the appropriate terms.

 

As for that properly not being fully supported, I'm not sure how accurate the data is on that page. I "fixed" the issue using that property and tested it in a Chrome browser. But, according to that linked page the property isn't supported in Chrome. I'd suggest testing it on the current versions of the main browsers. The only other solution that comes to mind right now would be to put each anchor within a DIV/SPAN with properties so they won't split across columns. It may take some trial and error.