pre tag may appear differently across various web browsers

Here is a code snippet that I'm having trouble with:

<span readonly="true" id="textarea" cols="60" rows="1">
  <pre style="{display:inline; white-space: pre-wrap; word-wrap:break-word;}"> SOME TEXT HERE </pre>
</span>

I am facing two main issues. Firstly, when I input a very long string without spaces or newlines, like in this example:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.

In Firefox and Opera, the text displays normally as:

aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaa

However, in Chrome, IE, and Safari it appears as:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

exceeding the screen width.

The second issue is that in Chrome, IE, and Safari, instead of displaying inline as intended, it shows as block even though I specified "display: inline;"

SOLVED: By using <span> instead of <pre>, it was inline from the start. Additionally, removing the curly braces {} fixed the display issue on Chrome, IE, and Safari. Thank you for your help!

htmlcssword-wrappre

Answer №1

Perhaps the reason for the issue you're facing is due to not setting a width property. In my experience, the usage of word-wrap is limited to block elements. You can try using inline-block if you require the text to wrap and be displayed inline.

It's quite unusual that you've nested a pre tag within a span tag with attributes similar to a textarea.

http://jsfiddle.net/A2MNN/

HTML:

<pre>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa.
</pre>

CSS

pre{
    width:40em;
    word-wrap:break-word;
    white-space:pre-wrap;
}

Answer №2

Your code contains errors that browsers cannot handle, causing your style sheet to break CSS rules. This could result in browsers displaying incorrect information or rendering garbage on the screen.

If you need assistance with resolving this issue, please clearly explain what you are trying to achieve and provide a valid HTML document showing your best attempt at solving the problem. Avoid using broken or incomplete solutions when seeking help.

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

When choosing a row from the table, the screen transitions to a blank page

When I select a row in the table view of my app (storyboard), instead of displaying an HTML file, I am faced with a blank screen. I initially thought that adding another view controller after the tableview controller would solve the issue, but it persists ...

htmlobjective-ciosstoryboardtableview

The jQuery datetimepicker does not have compatibility with HTML5 validation features

I currently have a date-time field in my form: <input type="text" class="form-control datepicker" required /> $('.datepicker').datetimepicker({ datepicker: true, timepicker: true, lang: 'pl' }); Each field in my form i ...

htmljqueryvalidationjquerydatetimepicker

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

What is the methodology for passing a dictionary to urlpatterns within Django?

I am currently facing an issue with my web page where I need to send data to a urlpattern in Django and then pass it to the view. I understand that I can include a dictionary in my urlpattern path which will be forwarded to my view: path("edit_page&qu ...

htmldjangourlview

PHP code to display or conceal tables

I am facing a challenge in my PHP code where I need to hide a table based on a specific condition. Despite trying to use CSS for this purpose, it seems that CSS does not recognize the if condition and always overrides it. I am looking for a solution that ...

javascriptphpcss

Updating an HTML value based on the selected option using JavaScript

I'm working on a form that included a select element: <select class="form-control"> <option>10 pc</option><!--1 USD --> <option>20 pc</option><!--2 USD --> <option>50 pc</option><!--3 USD ...

javascriptjqueryhtml

Is there a way to modify the style value within AngularJS?

<div class="meter"> <span style="width: 13%"></span> </div> I have the following HTML code snippet. I am looking to update the width value using AngularJS. Does anyone have a solution for this issue? ...

javascriptcssangularjs

Issue with ReactJS not applying classes based on conditions

I'm currently working on toggling a class on an element when a user clicks. However, I am facing an issue where my code only sets the class for a single element and does not refresh for subsequent clicks. Even though the set class is not being removed ...

cssreactjsreact-nativereact-reduxmaterial-ui

Menu options spreading out horizontally across multiple layers

https://jsfiddle.net/ccaf8msu/1/ <nav class="navbar navbar-default"> <ul class="nav navbar-nav navbar-right"> <li class="first leaf"><a href="/front">Frontpage</a></li> <li class="leaf"><a href="/library" class ...

cssmenu

A pair of div containers arranged in rows

I currently have 9 different div containers, each with unique styling for spacing and padding. My goal is to arrange these div cards into 2 rows with sufficient spacing between them for easy readability. As of now, I have all the div containers stacked in ...

htmlcssbootstrap-4

What is the best way to transmit success and failure alerts using ajax?

I've integrated MailChimp's API into my system, allowing me to subscribe email addresses by sending them to a specific URL. When an email is submitted, MailChimp responds with either a success or failure code. For example: myurl.com/[email  ...

phpjqueryhtmlajax

Enhance the Bootstrap parallelogram navbar menu by ensuring the menu items are perfectly aligned

I am working on customizing Bootstrap 5's navbar menu to create a rollover menu with parallelogram-shaped active menu items. I followed the approach recommended here, and while it works, the output is not as polished as I would like because the parall ...

htmlcsstwitter-bootstrapbootstrap-5

Managing class values with Selenium - Manipulating and updating classes

In the program I'm working on, there is a need to toggle which element receives the class value of "selected". <div class="countryValues"> <div data-val="" >USA and Canada</div> <div data-val="US" >USA - All< ...

pythonhtmlseleniumclasstags

What is the method for adjusting the height of a CustomScrollPanel to be 100%?

I'm trying to set a CustomScrollPanel to have a height of 100%, but I'm having trouble making it work. Here's what I've attempted: public class MyScrollPanel extends Composite implements HasWidgets { private ResizeLayoutPanel resizeLa ...

javajavascripthtmlcssgwt

The process of transforming four columns into two columns and two rows

I am aiming to create a layout that displays 4 columns on desktop and then breaks down into 2 columns and 2 rows on smaller screens. https://i.stack.imgur.com/GZ4nQ.png https://i.stack.imgur.com/5ZCrQ.png Any suggestions on how I can achieve this layout ...

twitter-bootstrapcss

JS Issue with clearRect not completely erasing canvas

If you are like me and relatively new to JavaScript, you may encounter some challenges. For instance, I tried to create an animation of stars in the sky by generating small circles randomly on a canvas and then selecting certain stars to flicker (changin ...

javascripthtmlcanvasrect

Tips for adjusting inner margins on ion-card elements in Ionic 4

Currently, I am attempting to create a card that contains text with specific spacing from the border. My first attempt involved setting padding for the card, but I found that the top and bottom spacing was too large. In my second attempt, I decided n ...

htmlcssionic-frameworkionic4

Preserving the HTML format of a string stored in MongoDB: Best practices

Currently, I am utilizing AngularJS for my frontend and mongodb for backend database management. For post editing, I rely on textAngular. When creating a new post, such as a service agreement, textAngular automatically adds formatting using HTML tags. &l ...

htmlangularjsmongodbformat

Does the placement of the HTML form matter in relation to the PHP code - should it go above or below, or is it insignificant?

New to PHP and trying to figure out where to place my PHP block in relation to my HTML form on the same page. Should it go below or above the form? I encountered an issue when setting default values for input fields: value="<?php echo $variable; ?> ...

phphtmlforms

The React application ceases to function properly as soon as I introduce a textfield

As a newcomer to React, I am facing an issue while working on the front-end UI of a web application. Whenever I try to add a text field to the box I created, the app fails to render anything other than a blank color on the screen. Here is how it looks: W ...

htmlcssreactjsmaterial-ui