Tips for modifying the size of the <code> tag against a background?

Is there a way to adjust the width of text within a (code) tag so it always fits within the background? I want the text in the (pre) element to resize along with the background as the browser window resizes.

Please see the pictures below for reference:

Image - Before minimizing

Image - After minimizing

This is my current code:

HTML

<pre>
            <code>
if (condition) { statement_1_runs_if_condition_is_true;
statement_2_runs_if_condition_is_true; } else {
statement_3_runs_if_condition_is_false;
statement_4_runs_if_condition_is_false; }
            </code>
</pre>

CSS

pre {
background-color: #CCC5B9;
border: 1px solid #999;
border-radius: 3px;
display: block;
width: 60%;
margin: 0 0 0 30px;}

code{
color: #252422;
font-size: 14px;
font-family: Consolas;}

Thank you.

htmlcss

Answer №1

When using the pre tag, text formatting like spaces and line breaks are retained, giving you more control over the layout. To enable word wrapping within the pre tag, adjust the CSS accordingly.

pre {
background-color: #CCC5B9;
border: 1px solid #999;
border-radius: 3px;
display: block;
width: 60%;
margin: 0 0 0 30px;
white-space: pre-wrap;
}

code{
color: #252422;
font-size: 14px;
font-family: Consolas;
}

Answer №2

This helpful website provides a detailed guide on how to format text within a pre tag. To achieve this effect, it is recommended to include the following code snippet in your CSS:

pre
{
    overflow-x: auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

Answer №3

It's important to avoid extra word wrapping in code, as it can impact the functionality, especially across different programming languages. To ensure proper line breaks and fit, setting the font-size based on viewport width is a reliable solution.

Here's a simple CSS snippet that achieves this:

body {
  width: 100vw;
}

code {
  font-size: 2vw;
  font-family: monospace;
}
<pre>
          <code>
if (condition) { statement_1_runs_if_condition_is_true;
statement_2_runs_if_condition_is_true; } else {
statement_3_runs_if_condition_is_false;
statement_4_runs_if_condition_is_false; }
          </code>
</pre>

Before implementing this approach, make sure to test if your code fits within the designated font size and viewport width. In cases where code is generated dynamically at runtime through JavaScript, calculate the maximum line length in characters and adjust the font size using JS.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Background image that is vertically responsive

I'm struggling with getting a full-page background image to maintain a consistent margin around all sides, especially at the bottom. I want the image to be vertically responsive using only CSS, without relying on Javascript. Any suggestions on how to ...

javascripthtmlcssresponsive-design

Minimize the gap between the input text and the lower border

Is there a way to bring the input text field and text closer together by reducing the space between the bottom border and the text? #a { padding: 1px 3px; background: transparent; border: 0; outline: 0; border-bottom: 0.8px soli ...

htmlcss

Adjusting the background width results in the container position being altered as well

Currently, I am working with two background images, each accompanied by a red box positioned absolutely inside a bootstrap container. The first red box is located on the right side and the second red box is on the left side. So far, everything is running ...

htmlcssbootstrap-4

Using jQuery, selectively reveal and conceal multiple tbody groups by first concealing them, then revealing them based on

My goal is to initially display only the first tbody on page load, followed by showing the remaining tbody sections based on a selection in a dropdown using jQuery. Please see below for a snippet of the code. //custom JS to add $("#choice").change(func ...

javascriptjqueryhtmlcss

Flaw in Basic Function Logic Using HTML, JavaScript, and CSS

Need some help with the function onBall3Click1 (code is at the bottom). The ball should act like a lightbulb: ON - turn YELLOW, OFF - turn GRAY. I've been trying to figure out the logic behind it for so long and can't seem to find the issue... ...

javascripthtmlcss

Hover effect on two divs changing states

I was so close to solving this issue, but I'm stuck on the final part. Here's the code snippet I've been working on: /* valuecanvas */ #wrappercs { margin-top: 3px; width: auto; height: auto; display: block; float: right; bac ...

htmlcss

The Best Way to Refresh a ReactJS Component in Plain HTML/JavaScript

So here's the situation. I'm diving into creating a React Modal component that can seamlessly integrate with any vanilla HTML / JS file. By generating a bundle.js file using Webpack from my React component, it becomes easier to inject it into a d ...

javascriptjqueryhtmlreactjsdom

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

After successfully developing a Universal Windows Platform app in Visual Studio using WinJS, JavaScript, CSS and HTML, I am now interested in leveraging the same code base to create an Android application. Could you guide me on the necessary steps to run ...

javascriptandroidhtmlcsswinjs

Is there a way to automate the clicking of a button on this webpage if using .click() is not effective?

Currently, I am developing an extension that facilitates purchasing products from Flipkart during flash sales. However, on the product page, I am unable to click the "Buy Now" button using JavaScript as it returns undefined. Here is the code for the Buy No ...

javascripthtmlreactjsgoogle-chrome-extension

Using Ajax to implement a content slider with lightSlider

Seeking assistance in developing a dynamic content slider utilizing the LightSlider plugin. Currently, I have a script that fetches content from a database table (outputting JSON to HTML) and displays 6 div's of content per slide. However, I aim to di ...

javascriptjqueryhtmlajax

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

javascripthtmlonload

What is the best approach to customize classes in material-ui with makeStyles and useStyles?

Imagine a scenario where there is a component responsible for rendering a button with a red background and yellow text color. A Parent component utilizes this child component but specifies that it wants the background color to be green while keeping the te ...

cssreactjsmaterial-uioverriding

What is the best way to display data from an Excel spreadsheet on my website?

I'm faced with a challenge in my Excel spreadsheet- I have a mix of numbers and text that I want to turn into graphical representations on a webpage. I'm considering using Python or PHP to achieve this as HTML alone doesn't seem up to the ta ...

pythonphphtml

HTML with an intricate and dynamic table layout

I am attempting to design a dynamic table that looks like the one shown in this image: https://i.stack.imgur.com/0Bmur.png The challenges I face in creating this HTML table are as follows: It needs to be dynamic as it will display data from a database T ...

jqueryhtmlangularjs

How can transitions be activated in Bootstrap 4 carousel?

Having an issue with my Bootstrap 4 carousel where I need to move 4 slides at a time. I have tried using the code below: $(this).carousel(4); However, the problem is that the carousel only jumps to that index without showing any transitions. Using $(this) ...

javascriptjquerycssbootstrap-4carousel

Exploring the Link Between jQuery and HTML

Is it possible to connect between an HTML file and a jQuery file? Here is an example scenario: jquery-test.js: $(document).ready(function(){ $('#inputForm').submit(function(){ $('#inputForm :text:not("#submit")').each(func ...

jqueryhtml

The div is identified by an ID and a class, but the class is not being utilized by the div

Can someone please explain why the font size, background color, and font weight are not applying to the content in the "welcome" class in this simple HTML/CSS code below? The DIV has both an ID and a class, yet the styles are not being reflected. Any insi ...

htmlcss

Having trouble with the href attribute not properly redirecting to a different page

I am trying to create a hyperlink for an option that will take users to another page. All the other options on the page lead to different sections within the same page. When I add CONTACT, it doesn't work. All the files are in the same ...

javascripthtmlcssnode.jsbootstrap-4

HTML5 CSS and Rails theme

I am currently utilizing a free HTML5 template found at this URL: Despite my efforts, I am unable to successfully implement the background images from the main.js file (bg01.jpg, bg02.jpg, bg03.jpg). How should I correctly reference these image files wit ...

cssruby-on-railshtml

Align and resize image using CSS styling

Seeking assistance on centering and cropping images using CSS. Tried implementing the technique from this specific article. However, experiencing inconsistencies in device UI output. Can someone shed light on this behavior? Scenario: The objective is t ...

htmlcssangularsassionic3