Block overflow CSS
PragmaticPraxis 1 month ago
Ihor, I am having trouble getting a DIV to overflow horizontally beyond a column. Not sure if this is even possible, but hopefully I can actually do it with some CSS and I am just missing how to do it. I have tried adding overflow-x: visible!important; to both my code css and a div I wrapped the code in. Neither is working.
An example can be found here.
Awesome, thanks Ihor!
Ihor, I wonder if you might have some insight on another issue. I am seeing <br>s applied for every Span I use, which in that same link you will now see causes spaces where there shouldn’t be any. But I can’t tell where spans are getting those breaks added. I tried to get an answer on StackExchange, but as soon as things get complicated they freak out and ask for their usual “minimal, reproducible example”, and there is no problem in that case, it’s some interaction with the theme or something I have broken in the CSS. 🙁
my understanding is that white-space: nowrap!important; or white-space:pre!important; should address that, but I can’t get it to work. Am I misunderstanding and <span class=”px_code_new”> on it’s own line is going to trigger a new line and there is no workaround? The StackOverflow consensus was that there shouldn’t be a <br> at every <span>. Fingers crossed I am misunderstanding something fixable. 🙂
Just to clarify, I have large blocks of code that I want to style to differentiate newly introduced ideas from code that has already been discussed and is just context. But I don’t want to introduce extra white space. My hope had been to wrap the whole thing in a context style, then wrap just the new stuff in a new style.
I just tried moving the code tags to wrap everything, so each line of code is a nested bunch of spans only, not a code block wrapping those spans. That worked. But, when I then added a span for the New stuff on it’s own line, with no actual text to show, I again get a new line that I don’t want. So, my guess is I simply can’t do what I want to do, though that example is the first one on that page, should you want to take another look because you think I might be able to make it work. Thanks for your time on this! I know it’s not a theme issue now, so not your problem to solve.
That said, it looks like the transparency I want/need for the context stuff absolutely must be on a line by line basis, even if I I put that span on the same line as other spans, so the extra whitespace isn’t an issue, the transparency still is. So, no way to make it work. 🙁
Hmmmm… Curiouser and curiouser. Even a comment seems to produce white space. I added a single line comment between existing and new examples, that where working with no whitespace, and now I have whitespace. That seems very problematic because liberally adding single line comments should definitely not change the visual presentation in any way. So something weird is definitely going on. 🙁
OK, I tried inspecting the HTML using the W3Schools.com TryIt utility, and I don’t see any <br> between elements. On my site there is a <br> between basically every single thing, and no closing </br> anywhere.
Is that normal? Does anyone else see the same behavior on their own web site?
Ihor, I think something else must be going on. Even when I use display:inline!important; it still misbehaves. Especially the fact that <!– Comment –> produces a blank line in the browser seems super odd. And the <br> between every span element seems odd too. When I recreate my CSS in a test environment, it behaves very differently.
You must be logged in to reply to this topic.