Text wrapping in Internet Explorer varies between textareas and divs

When viewing the content in Internet Explorer (specifically tested in IE10), it appears that within a textarea, a space after a word is treated as part of the word itself when it comes to wrapping. The issue can be observed by comparing the following images:

On the left side, you'll see the textarea, and on the right side, a div with the same content as the textarea. In the first image, the word "vero" fits well in the line with "voluptua". However, after adding another word (or even just a space), "vero" moves to a newline, but only in the textarea, not the div. It's essential for me to calculate the height of the textarea, so having consistent word wrapping/line breaking behavior is crucial.

I've already attempted to apply the same word-wrap, white-space, line-break, -ms-word-break, word-break, and -ms-hyphens properties to both the textarea and div, but unfortunately, I haven't seen any positive results thus far.

Has anyone encountered this issue before and found a viable workaround?

htmlcssinternet-explorerword-wrap

Answer №1

$(function() {  
    var txt = $('#comments'),  
        hiddenDiv = $(document.createElement('div')),  
        content = null;  

    txt.addClass('txtstuff');  
    hiddenDiv.addClass('hiddendiv common');  

    $('body').append(hiddenDiv);  

    txt.on('keyup', function () {  

        content = $(this).val();  

        content = content.replace(/\n/g, '<br>');  
        hiddenDiv.html(content + '<br class="lbr">');  

        $(this).css('height', hiddenDiv.height());  

    });​  
});

CSS: 

textarea {  
width: 500px;  
min-height: 50px;  
font-family: Arial, sans-serif;  
font-size: 13px;  
color: #444;  
padding: 5px;  
}  

.noscroll {  
overflow: hidden;  
}  

.hiddendiv {  
display: none;  
white-space: pre-wrap;  
width: 500px;  
min-height: 50px;  
font-family: Arial, sans-serif;  
font-size: 13px;  
padding: 5px;  
word-wrap: break-word;  
}

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

Using the "export default" feature in React.js is a

Is it possible to name an exported function as "default" without encountering an error? export default() => { const [width, setWidth] = useState(0); const [height, setHeight] = useState(0); useEffect(() => { setTimeout(() => { setWidth(window.i ...

javascripthtmlreactjs

Conceal any DIVs that do not include every specified class

My webpage consists of numerous DIVs, each representing a specific product with its own set of characteristics. I have assigned these characteristics as classes to each product. Here is an example of how each product DIV is structured: <div class=&apos ...

javascriptjqueryhtml

Hiding a Hide/Show DIV when hovering over the Google+ Follow Button

I'm currently working on a project that involves a hover drop-down panel with Google+, Facebook, Youtube, and Twitter social widgets. These widgets are listed for visitors to easily click on each one without the panel closing. Initially, I created a ...

jqueryhtmlgoogle-plusjquery-hover

Struggle with Firefox: Table-cell with Relative Positioning Not Acting as Parent

Upon investigation, I have come across a unique layout issue that seems to only affect Firefox. It appears that elements with display:table-cell; do not act as the positional parent for descendants with position:absolute;. It is surprising to discover th ...

htmlcssfirefox

Choosing specific child elements based on their css attribute valuesUnique: "Targeting

I am attempting to customize the appearance of any child divs with the class 'header' that are within parent divs with a class of 'recipes'. I understand that I could simply target .category-recipes .header, but the parent div may vary ...

csswordpresscss-selectors

Troubleshooting: Bootstrap interfering with external CSS file and causing errors

Attempting to utilize Bootstrap for the design of my website, I encountered an issue when trying to implement an external CSS file named "mycss.css". Unfortunately, it seems to not be functioning properly at all. Both the file, "mycss.css" and index.php ar ...

cssbootstrapping

I noticed that my jquery code is injecting extra white space into my HTML5 video

Ensuring my HTML5 background video stays centred, full-screen, and aligned properly has been made possible with this jQuery snippet. $(document).ready(function() { var $win = $(window), $video = $('#full-video'), $videoWrapper = $video. ...

javascriptjqueryhtmlhtml5-videowhitespace

adjusting the spacing between columns in bootstrap 4 using a variable, if feasible

How can I adjust the padding (left/right) on columns in Bootstrap 4? For example: The col-md-4 class appears to have a padding of 15px on the left and right sides. I want to make this smaller, perhaps 10px. I've checked the _variables.scss file but ...

csstwitter-bootstrapsasstwitter-bootstrap-4

Is there a way to disregard inherited styles without relying on the use of "!important"?

Is there a way to create a new class in CSS that ignores all inherited styles without needing to use !important for each one individually? This is my HTML code: <div class="text"> <h2>Title</h2> <span>Date</span> &l ...

htmlcss

HTML's JavaScript is loaded prior to the completion of ng-include

I am facing an issue where my HTML file loads the .js and .css before the ng-include has finished. As a result, these libraries cannot find the elements that are loaded in the include. For example: <html> <head> <link href="as ...

angularjshtmlmeanjsangularjs-ng-include

What is the best way to ensure the width of the div is adjusted to fit the table it contains?

What is the best way to adjust the width of a div containing a potentially wider-than-screen table? Despite setting padding: 10px for the div, the right padding disappears when the table exceeds the screen width. Below is an example code snippet: <div ...

htmlcss

Tips for decreasing the width of your HTML or body content using media queries

I am struggling to adjust the width of my desktop view using a media query. My most recent attempt looks like this: @media (min-width: 992px) and (max-width: 1199.98px) { html, body { max-width: 80%; } } However, this code seems to have no ...

htmlcsstwitter-bootstrapbootstrap-4

Can CSS be used to create drop down menus?

Is it possible to create a dropdown menu using only CSS, similar to what you would find in most applications? I have a simple menu bar at the top of my screen and I want to be able to hover over an item like "Item1" and see sub-items appear below it. I en ...

javascripthtmlcss

Flexible Box Model Parent with Children Having Full Height

I'm currently developing an application featuring a custom calendar that utilizes Flexbox for styling, with all the date logic being managed by React. While the calendar is working perfectly fine, I've encountered a styling issue that has me stu ...

htmlcssflexbox

The issue I'm facing involves Materialize CSS interfering with the rendering of input fields from PrimeNG. Does anyone have a solution to resolve

The code I am working with is as follows: <div class="container" style="width:100%;"> <div class="ui-widget-header" style="padding:4px 10px;border-bottom: 0 none"> <i class="fa fa-search" style="margin:4px 4px 0 0"></i> < ...

cssmaterializeprimengprimeng-datatable

`Why won't the checkbox uncheck when the dropdown is changed in jQuery?`

I have a roster of users, each with a unique checkbox for selection. When I adjust the dropdown menu, a new group of users is chosen and marked as selected. However, I am struggling to uncheck the previously selected checkboxes based on the last dropdown c ...

javascriptjqueryhtmlcheckboxdrop-down-menu

Tips for Selenium: Automatically Save PDFs from Webpages without a Download Button

1.) How can I download Article PDF files from multiple web pages to a local folder on my computer using Selenium if there is no "Download PDF" button available? 2.) I thought about using keyboard keys for printing such as "Control - P", but none of the ke ...

htmlpython-3.xseleniumpdfbrowser-automation

What is preventing me from adding a borderRadius to this particular React bootstrap tab?

I have been working on tabbed content and encountered an issue with applying border radius. Despite adding style={{borderRadius: "10px"}}, it seems to have no effect. This styling works perfectly everywhere else in my project, so I am puzzled as ...

javascriptcssreactjsbootstrap-4react-bootstrap

What causes AJAX to return the newest variable from a loop in an HTML template?

Below is the HTML file I am working with: <div id="preview_updated_notifications"> {% for lst in unread_list %} <div > <span data-notification-item="{{ lst.id }}" id="_mark_as_read_id" ...

htmljquerydjangoajax

The initial function is only triggered by clicking on the HTML button, not by any other means

Just delving into the world of javascript, I've encountered a puzzling issue where only one out of my current 3 coded buttons seems to respond to clicks or execute its associated function. The first example of code works flawlessly; The HTML <div ...

javascripthtmlweb