problem involving the html <pre> element

I have a request that needs to be fulfilled.

Requirement: key - this is the value type - this is the type value

Currently, I am utilizing the <pre> tag. However, the output appears as follows:

key1: this is the value
          type1 : this is the type value

          key2: this is the value
          type2 : this is the type value

key3 :this is the value
          type3 : this is the type value

My specific requirement is for each new key and type combination to start from scratch in the display:

key1 :this is the value
type1 : this is the type value

key2 :this is the value
type2 : this is the type value
htmlcss

Answer №1

Use the following CSS style.

CSS Style:

pre { white-space: pre-line; }

HTML Code:

<div>
    <pre>key1 : this is the value
        type1 : this is the type value

        key2 : this is the value
        type2 : this is the type value

        key3 : this is the value
        type3 : this is the type value</pre>
</div>

Displayed Output:

key1 : this is the value
type1 : this is the type value

key2 : this is the value
type2 : this is the type value

key3 : this is the value
type3 : this is the type value

Answer №2

If you indicate that you are preformatting your text, then make sure to actually preformat it.

Do not insert extra spaces at the beginning of the following lines just to align with the indentation of your source code. Only include spaces if necessary.

For example:

<div>
    <pre>foo
    bar
    baz
    </pre>
</div>

should be changed to:

<div>
    <pre>foo
bar
baz
</pre>
</div>

Answer №3

Your HTML code is missing. Make sure to properly format the HTML content for it to work correctly.

<pre>
key1 :this is the value
type1 : this is the type value

key2 :this is the value
type2 : this is the type value

key3 :this is the value
type3 : this is the type value

</pre>

http://jsfiddle.net/UUgpk/

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

Conceal the column title for order items in the WooCommerce admin panel

I've been attempting to hide certain columns within the administrative section of Woocommerce, but have had no success with the code I'm using. I'm currently stuck and my question is: Is there a way for me to conceal specific column names i ...

csswoocommerceorders

Is it possible to have the Facebook widget load from a locally saved HTML file?

I am currently working on coding a local file on my tablet and I need the Facebook widget to display correctly. However, it appears that the widget is not showing up when viewed from a local file. Is there any way to make it work in this situation? Here i ...

htmlfacebook

Is it feasible to verify for vacant dates with a single click?

Is there a way to determine if a date value is empty, and if it is, display a popup indicating so? After some research, I stumbled upon a similar issue where the date value was always filled with a default "mm/dd/yyyy" value. The solution provided involv ...

javascripthtml

Display a pair of distinct items side by side on a webpage

When needing to display information in the format below: Reason : reason number 1 reason number 2 reason number 3 Code : code number Remarks : remark In this scenario, Reason, Code, and Remarks serve as headings enclosed in <s ...

htmlcssangular

Need to know how to retrieve the li element in a ul that does not have an index of 2? I am aware of how to obtain the index greater than or less

I'm looking to hide all the li elements except for the one with a specific index. I've written some code to achieve this, but I'm wondering if there's a simpler way using jQuery. While jQuery provides methods like eq, gt, and lt, there ...

javascriptjquerycss

Is there a way to obtain the function associated with an onclick attribute?

I have a function attached to the onclick event in the HTML, as shown below: <script> function f1(){ alert('hello world'); }; </script> <a onclick="f1()">test</a> I want to manipulate that function by binding it to ...

javascriptjqueryhtml

Utilizing shared components with withStyles and material ui components

I'm currently working on a project using React, TypeScript, and Material UI. Here is the layout I have: <MuiThemeProvider theme={muiTheme}> <My Component/> </MuiThemeProvider> Within my component, the code looks something ...

cssreactjsmaterial-uijss

What is the method for eliminating the box shadow on a table?

Seeking assistance on removing the shadow effect from ng-tables upon hovering. Can someone guide me on how to achieve this? See screenshot here: http://prntscr.com/jcpl5g widget-body { background-color: #fbfbfb; -webkit-box-shadow: 1px 0 10px 1px rgba(0, ...

htmlcssangularjsngtable

Is there a way to reset back to the default CSS styles?

I have a div container with a nested span element (simplified). <div class="divDash"> <span>XX</span> </div> The CSS styling for the div makes the span initially hidden and only visible when hovering over the parent div. .div ...

javascriptjqueryhtmlcss

Display the text field in Angular with the appearance of a password field, not an input field

I am currently working with Angular 8 for my Angular-Electron project. Within this application, I have a sensitive field labeled API-Key stored in tabular format that needs to be displayed on the user's account page. However, it must appear as a passw ...

javascripthtmlangulartypescriptelectron

Positioning JQuery sliders

I've been working on a jQuery slider for my header, but I'm encountering an issue where the previous image drops down to the next container instead of staying in place and transitioning smoothly. It seems like there might be an error in my HTML/C ...

javascriptjqueryhtmlcss

What is the best way to set a minimum width for websites with relative (%) widths that are compatible with IE6 and above?

I am working on a website where I utilize percentages (%) for widths to create a flexible layout. However, I am encountering an issue where everything breaks at a certain width, such as 800px. Is there a way to set a maximum width of 800px and then displa ...

css

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

I'm having trouble playing the WAV file located at this link. The file plays fine in VLC and the details show that it is a Mono IMA WAV APDCM Audio (ms) file sampled at 24000Hz with 16 bits per sample. However, when I try to play the file by embeddin ...

javascripthtmlaudiowavaudiobuffer

Tips for inserting line breaks in a variable received by pug

Is there a way to pass values including new lines into pug files? I have attempted to achieve this with the following code: var value1 = "value 1"; var value2 = "value 2"; var information = "\n" + value1 + "\n" + value2; res.render('pugfil ...

node.jshtmlexpresspugpug-loader

What steps can I take to prevent constantly re-fetching a disabled CSS file?

I'm currently in the process of implementing a dark theme on my website, and my current method involves using 2 style sheets: <link rel="stylesheet" type="text/css" href="/flatly.css"> <link rel="stylesheet& ...

htmlcssvue.jsdarkmode

The final row continues to display the <div> element

Currently, I am in the process of learning PHP/MySQLi and there is something I need assistance with that I haven't been able to find a solution for online. In the forum script that I am developing, I have been using <div class="hr"> </div> ...

phpcss

Utilizing various z-index values for multiple background images in a single CSS class

My approach may be completely off. I am in the process of building a website using sliced images from a .PSD file created by a graphic artist. Essentially, the background image consists of 4 green bars angled at 45 degrees slightly intertwined with 3 blue ...

htmlcssbackground-imagez-index

Is there a way to disable the splash screen when logging out?

Currently, I am facing an issue with my login and logout page that includes a splash screen. The splash screen works perfectly on the load page without using any jQuery or JavaScript functionalities. It is created using CSS3 animations. However, when I c ...

htmljquerycsssplash-screen

Simple Selection Panel

Looking to include a simple dropdown menu with 5 choices. Once a selection is made, an answer corresponding to that choice will appear in another field next to it. For example: Choosing France from the dropdown would display 'Paris' in the adjac ...

htmlcsstextboxdropdowntextfield

Tips for setting up a popup menu when clicking a button on a webpage

I am currently working on developing a popup menu with a greyed-out background that appears when the user clicks on a button in React. My code implementation is as follows: // The ifButtonClicked function is called when another button is clicked // Some ...

javascripthtmlreactjs