I am trying to find a way to make something render on a page. The goal is to have a colored rectangle with text centered inside. I am using this as a visual marker to highlight specific content on the page. A picture is attached to show what it looks like.
Previously, I used this to style the element:
CONCLUSION
I have been slowly updating various things on my course to use more modern techniques, such as
tags. Here was an updated version which renders nearly identically:
GOALS
Here is where my dilemma lies. If I zoom in the browser window while teaching, text within the latter example will sometimes bleed outside the border for the div element. A second screenshot is included to show what this looks like. I've also noticed this happens if the browser window size is reduced. I discovered this initially while doing some side-by-side windows the other day. However, when I used the table method, this issue disappears. The element will reduce in width/height, but will not reduce so far that the text bleeds out.
I've tried editing various parts of the div example, including a max-width, adding flex to the display, and even changing the font to include em, all based on research. However, the problem still exists. I know that CSS and HTML in Canvas does not render everything and will strip out unsupported tags. I am wondering if anyone with more experience might have an idea to help me create the element and prevent the issue using div, or do I need to go back to rendering everything with tables? I have noticed that this happens in some other areas where the div tag was used.
