Stop editable content div from expanding horizontally

Question

Stop editable content div from expanding horizontally

I have a contenteditable div element with the class ".textarea_mask."

<div class=".textarea_mask" contenteditable ></div>

My goal is to make this div act like a text area. It functions correctly in modern browsers, but I am having issues with Internet Explorer 8. When entering a long phrase like

abcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyzabcdefghijklmnopqrstuvqxyz

, the text breaches the boundaries of the div and causes it to expand or hide when applying overflow-x: none.

Is there a way using jQuery to detect overflow and truncate the long phrase so it fits within the div's width?

Note: Typing standard text like "A cat and a dog" will automatically move to the next line.

Thank you for any assistance.

jquery html css

Answer 1

Answer №1

If you're looking to implement text wrapping in CSS, the property you're searching for is overflow-wrap. Most browsers still support it as 'word-wrap' (http://caniuse.com/wordwrap).

You can learn more about it on MDN: https://developer.mozilla.org/en-US/docs/CSS/word-wrap

To see a demonstration, check out this link: http://jsfiddle.net/THC5q/4/

Here's an example of how you could use it in your HTML:

<div>
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

And here's the corresponding CSS:

div {
    width: 200px;
    background-color: #ff0;
    word-wrap: break-word;
}

Answer 2

If you're looking to implement text wrapping in CSS, the property you're searching for is overflow-wrap. Most browsers still support it as 'word-wrap' (http://caniuse.com/wordwrap).

You can learn more about it on MDN: https://developer.mozilla.org/en-US/docs/CSS/word-wrap

To see a demonstration, check out this link: http://jsfiddle.net/THC5q/4/

Here's an example of how you could use it in your HTML:

<div>
    ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

And here's the corresponding CSS:

div {
    width: 200px;
    background-color: #ff0;
    word-wrap: break-word;
}

Stop editable content div from expanding horizontally

Answer №1

Similar questions

Creating CSS boxes in a dual column layout with a step-by-step approach

Optimize Google Places Autocomplete: Customize the way search results are shown after selection (display only street name and number)

Understanding how to retrieve a particular list item in JQuery without having the index in advance

Firebase hosting adjusts the transparency of an element to 1% whenever it detects the presence of CSS opacity

Build a basic website featuring a left-side menu and content on the right side

Why is my node.js react app failing to detect the index.html file?

Tips for managing JSON.stringify information within Laravel

Adjust the width of the element to match the size of the image within

Prioritize the Menu display

Refreshing the identification of a button

Creating a scrolling background effect using HTML and CSS: ``Background Parallax

Creating dynamic content in the Ajax-enabled Smart Admin theme: A step-by-step guide

How can you modify the color of a card in React by mapping through an array and evaluating its value?

jQuery AJAX request unexpectedly terminates

Toggle the visibility of items based on the user's login status

Only the main page is accessible quickly through Express

OpenLayers 4 - adjusting the view to the boundaries of chosen features

Launch the desired div in a fancybox from a separate webpage

What is the best way to customize the icon-bar in react-bootstrap's Navbar?

Changing or toggling the visibility of links once the week is finished