How to prevent text wrapping

Anvil Q&A
1

Is it possible to prevent text wrapping?
I’ve tried to add a role with the below CSS, but doesn’t seem to be working.
{white-space:nowrap; overflow:hidden; display:block;}

I would like to keep text as it is being uloaded by Uplink, even if it doesn’t fit screen/window size.

What I have in mind is horizontal scrolling, but not entirely sure how.

I’d appreciate if someone could point me in the right direction.

2

Did you figure it out? I’ve got the same problem on a project of mine…

3

Hi @matyasid,

Have you tried overflow:auto instead of overflow:hidden?

1 Like
5

Hi Brooke,

I have not until now, but this is exactly what I was looking for. Big thank you!

@klemens-fischer
I’ve put the below in theme.css file in assets, then selected “test” role for labels in design mode, if you wanna give it a try.

.anvil-role-test {
white-space: nowrap;
overflow: auto;
display: block
}

6

@brooke
It does work nice in desktop browser, but on mobile text is still wrapping unfortunately.

Any advice on that perhaps?

7

Hi again,

Chrome seems to be ignoring white-space: nowrap; both in windows desktop browser and on mobile. Firefox on desktop works fine, while Firefox on mobile shows something in between the two (seems to ignore the monospace font set in design mode).

I’ve tried to target Chrome with CSS, but white-space is still simply being ignored, while other lines are taking effect.

If anyone had similar issues and came up with a solution / workaround, please let me know.

Cheers!