[Terra-text] - `isWordWrapped` property does not wrap long words on IE.
See original GitHub issueBug Report![long ordername truncation](https://user-images.githubusercontent.com/51478407/131106716-0c10d04f-42ef-4c5a-b209-26b9c1703c93.png)
Description
While working on Internet Explorer i have been using terra-text component to wrap my information but i noticed when the resolution of the explorer is reduced the long words does not get wrapped up and text overflows while at the same resolution the same component when loaded on google chrome works fine with text not overflowing.
Steps to Reproduce
- Set up long texts like (“zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz”) or (“amnsjxnweiucnweicnxeixnniwnxuwnxiqnxiqwnx”) in the terra-text control with prop-type
isWordWrapped
passed. - Now reduce the size of the IE window.
- We will notice that the text overflows instead of wrapping up
Additional Context / Screenshots
MicrosoftTeams-image (3)
Expected Behavior
The text should not overflow instead should come down to the next line.
Possible Solution
Environment
- Component Name and Version:
- Browser Name and Version: Internet Explorer 10,11, Edge
- Node/npm Version: [e.g. Node 8/npm 5]
- Webpack Version:
- Operating System and version (desktop or mobile): Windows
@ Mentions
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
Top Results From Across the Web
Internet Explorer 11 word wrap is not working - Stack Overflow
It seems that word wrapping no longer works for textarea elements in IE 11. In IE 10 and earlier, FF, Safari, and Chrome...
Read more >wordWrap property (Internet Explorer) - Microsoft Learn
The -ms-word-wrap property addresses only whether wrapping is permitted to occur at a place in the word that is not otherwise allowed by...
Read more >wrap, overflow - wrap - , and - word - break - LogRocket Blog
The default wrapping at soft wrap opportunities may not be sufficient if you are dealing with long, continuous text, such as URLs or...
Read more >The word-wrap CSS Property and How to Use It
Basically, word-wrap forces the text content targeted by the selector to break any long words that might potentially go outside the layout due ......
Read more >overflow-wrap - CSS: Cascading Style Sheets - MDN Web Docs
Most words are short & don't need to break. But Antidisestablishmentarianism is long. The width is set to min-content, with a max-width of...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@pranav300 We are seeing the issue in chrome as well now, i’ll get back to you with more details on the same.
This issue seems to be not happening on IE 11 as I was able to test the terra-text with large text as shown in screenshot shared below the text was wrapped when isWordWrapped was set.
I even verified with other examples as well on IE 11. Text was not overflown as shown in the issue. Look at screenshot I think the view holding terra-text is not Modal view. Not sure if we need to consider to include terra-text within IFRAME to see if the overflow happens.