CODEWITHSUNDEEP
htmlcssinternet-explorer-10
rredondo
rredondo

Reputation: 951

Internet explorer 10 word-break not working

I want the text to wrap accordingly to the width of the table if it is changed. My CSS works everywhere (Firefox, Chrome, even other versions of IE) except for IE 10.

This is the HTML code:

<div class="container">
  <table class="table">
    <tbody class="tBody">
      <tr>
       <td>
          <span class="spanClass">
             <img src="image.png">
              <a href="">This is a verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyy long
                      text that doesnt work like I want it to. I hate IE.
              </a>
           </span>
         </td>
       </tr>
    </tbody>
  </table>
</div>

This is the CSS:

.container {
  white-space: pre-wrap;
  display: inline-table;
  word-wrap: break-word; 
  word-break: break-all;
 }

 table {
  width:100%;
  table-layout:fixed;
 }

.spanClass {
  display: inline-flex;
 }

Ive noticed the .spanClass rule may be interfering with what I want, but I need that rule to keep the <img> and <a> elements aligned properly in other browsers.

Upvotes: 3

Views: 9383

Answers (2)

greensin
greensin

Reputation: 479

IE10 is a browser that is no longer supported and Microsoft do not invest time in developing new features or adapting it to updating technologies(JS, CSS etc...).

To currently resolve your issue you can give the container that holds the text a fixed width in pixels. IE10 would then remove any overflowing-x content to the next line. This is the best you can achieve if needed to support IE10. You can see that IE10 does not respect the word-break value in pic attached: enter image description here

Link to check: https://caniuse.com/#search=break-word

In my case for example(in which I was required to support a certain item card container inner text overflowing on the x axis(horizontally) - what I did is give width: 120px; and was able to make IE10 respect this width and break the sentence.

Upvotes: 5

Super User
Super User

Reputation: 9642

You can use below css instead of yours: 

.spanClass {
  display: inline-block;
  word-wrap: break-word;
  word-break: break-all;
 }

Upvotes: 7

Related Questions