HTML Formatter is inserting extra space when Formatting

Problem description

When I right-click and choose “Format” in an HTML file set up by the HTML/CSS/JS template,
I see extra spaces inserted into a paragraph tag in the HTML.

Expected behavior

The string in the paragraph should just wrap around without adding extra spaces into the paragraph string.

Actual behavior

Extra spaces are added into the paragraph string.

Steps to reproduce

Create a repl using the HTML/CSS/JS template
add a paragraph paragraph tag with this string
Cookies come in many shapes and flavors. You can make your own cookies or buy them at the store. Here are some cookies I enjoy. I’m providing a list of recipes below.
right click on the web page and select Format

Browser

Chrome

OS

Windows 11

Device if mobile

NA

Plan

free tier

I asked chatgpt
in an html file when you use < p > tags and then an auto formatter , is it supposed to try to break the text into lines of a target range of characters? is this to prevent text from going off the screen horizontally

it responded:
When using a text formatter, whether it’s an auto formatter in an IDE or a browser rendering HTML, it may attempt to break long lines of text into multiple lines within the defined container width. This is often done to prevent horizontal scrolling or text overflow beyond the boundaries of the container.

In the case of HTML <p> tags, which are used to define paragraphs, the formatter may attempt to break the text into lines based on the width of the container or the specified width of the paragraph itself. This helps in maintaining readability and ensures that the text fits within the designated space without overflowing horizontally.

However, the specific behavior of the formatter can vary depending on the settings, preferences, and algorithms used by the formatter tool or the browser. Additionally, if you’re using CSS to style your paragraphs, you may have control over text wrapping behavior through properties like word-wrap or overflow-wrap.


In HTML, you cannot directly set the width of each line within <p> tags. The width of the lines is typically determined by the width of the container or the width of the <p> tag itself. However, you can control how the text wraps within the <p> tag by using CSS properties.

One common CSS property used for controlling text wrapping is max-width. You can apply max-width to the <p> tag or its parent container to limit the maximum width of the paragraph. This will cause the text to wrap within the specified width.

Here’s an example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Wrapping Example</title>
<style>
  /* Set max-width for paragraphs */
  p {
    max-width: 400px; /* Adjust the value as needed */
  }
</style>
</head>
<body>
  <p>This is a long paragraph that will wrap within the specified maximum width. This is a long paragraph that will wrap within the specified maximum width. This is a long paragraph that will wrap within the specified maximum width.</p>
</body>
</html>

at 400 px

or
at 800 px

I’m not sure if this is entirely accurate or helps for you. I just noticed that when I formatted it each line was between 110 and 115 characters so that’s what prompted my question.

I believe it’s essentially to prevent your text from looking like this , (how the one line continues off the screen.)

1 Like