Working with overflow property

Question

In my latest Web code I wanted to make a Python interpreter. In one particular case I wanted to display the error in special red font (white background was added for debugging only)

However, the test just overflows to the right. I've tried ways such as using "word-wrap", "white-space" and "overflow" but they are not limiting the error text to that confined width. Could you please help me to fix it? Thanks!
https://code.sololearn.com/WTOCJT190vzN/?ref=app

Answer 1

⚡Prometheus ⚡ no worries. Didn't know you still wanted the 80vw. Thanks for the follow up. 🙂

Biraj white-space normal is the default. "Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary." So if you have 5 spaces (or tabs like you might in your code if you split the string into multiple lines) the 5 space render as 1 space.

https://www.w3schools.com/cssref/pr_text_white-space.asp

I suppose in this case, it overrides the behavior of the parent (pre) element.

The word-wrap break-word is helpful if the input was obnoxiously long.

Good find. 👍🏻

Answer 2

Janning⭐ Yes indeed.

I set the height and width to mimic Sololearn's overflow demo in their lessons, otherwise they are not meant to be there.

I wanted the message to terminate at the end of the screen and move on to the next line.

Answer 3

Janning⭐

Suppose my output looks like:

Error: Blah blah|... blah blah

I want to fix it such that it becomes like:

Error: Blah blah|
.... blah blah |

Answer 4

Janning⭐ What that does, is do:
Error: Blah blah|.... blah blah

What I am aiming for is:
Error: Blah blah|
.... blah blah |

Where the | represents the desired width of the element.

Edit: Biraj 's solution worked for me, so I guess we can close the discussion. Thanks Biraj!

Answer 5

overflow: hidden

will truncate and suppress scrolling

but it sounds like what you want to do is remove the width and height properties, then change the parent of #errstr (#output) from a <pre> element to something more flexible (like a <div> for example).

Please let me know if that was what you were going for or if it causes other heartaches for you.

Answer 6

Actually, you don't even need overflow: auto. 🙂

Answer 7

I think I get it and it would be a quick fix if the Code Playground would let me save the project, but it hits "No Connection" for me immediately on the WiFi and after a second on the Cell Data. 😅

HTML line 61:

<div id="output" ></div>

CSS lines 39 through 44:

#errstr{
background-color:white;

overflow:auto;
}

Answer 8

🤔
Maybe I'm not understanding the desired result, but as far as I can tell, all 4 properties are working.

#errstr{
background-color:white;
width:80vw;
height:15px;
overflow:auto;
}

- The background color is white.
- The width is 80% of the viewport width.
- The height is 15px. (Most browsers set the default font size to 16px, so you will only see one line of text.)
- Extra text that flows outside of the container can be seen when scrolled (swipe left in container).

Were you wanting the extra text to be truncated (cut off) and not scrollable instead?