How to get the word-break:break-word effect in Firefox mobile browser (version 30.0) on Android?

Question

I have the following code:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.entire_content {
border-collapse: collapse;
width: 100%;
word-break:break-word;
</style>

<table class="entire_content">
<tbody><tr><td>
<ul>
<li><span style="font-size:18px;">Compatible with IEEE 802.11n draft 3.0, 802.11a/b/g wireless standards</span></li><li><span style="font-size:18px;">2.4GHz and 5.8GHz frequency band, MIMO (Multiple Input Multiple Output)<br></span></li><li><span style="font-size:18px;">High speed transfer TX data rate up to 150 Mbps</span></li><li><span style="font-size:18px;">High speed transfer RX data rate up to 300 Mbps</span></li><li><span style="font-size:18px;">Complies with Universal Serial Bus Rev. 2.0 specifications<br></span></li><li><span style="font-size:18px;">Supports WPS by S/W<br></span></li>
<li><span style="font-size:18px;">Supports wireless data encryption with 64/128-bit WEP, WPA, WPA2, TKIP, AES</span></li>
<li><span style="font-size:18px;">Wide Range coverage</span></li>
<li><span style="font-size:18px;">Support software AP on windows</span></li>
<li><span style="font-size:18px;">Compliant with FCC Part 15.247 for US, ETS 300 328 for Europe</span></li>
<li><span style="font-size:18px;">Supports driver for:</span>
<ul>
<li><span style="font-size:18px;">Windows 2000, XP 32/64 bit, Vista 32/64 bit, Windows 7 32/64 bit, Windows 8 32/64 bit, Windows 10: http://alfanetworkinc.blogspot.tw/2015/08/blog-post.html</span></li><li><span style="font-size:18px;">Mac (10.4.x/10.5.x/10.6.x/10.7/10.8/10.9) Power PC&amp; PC</span></li><li><span style="font-size:18px;">Linux (2.4.x/2.6.x)</span></li></ul></li></ul>
</td></tr></tbody></table>

It displays great in the default browser of my Android 5.1 phone, which is actually Chrome 44, and on Chrome 47. It also displays great on my older phone, Android 4.0.4 (Ice Cream Sandwich) on Chrome, version 29. It displays terribly on the default browser, but that's due to being unable to get a responsive page on that device as I mentioned and am asking for help here: https://stackoverflow.com/questions/35689614/how-to-get-a-page-to-be-responsive-on-android-browser-default-browser-on-androi .

On Firefox, version 30.0, I have to scroll horizontally to be able to see the full content, which flows off to the right of the screen. This is because this long line

Windows 2000, XP 32/64 bit, Vista 32/64 bit, Windows 7 32/64 bit, Windows 8 32/64 bit, Windows 10: http://alfanetworkinc.blogspot.tw/2015/08/blog-post.html

and this one

Mac (10.4.x/10.5.x/10.6.x/10.7/10.8/10.9) Power PC& PC

but the first one especially, is not breaking the words / the URL at where the screen ends.

I have this problem only with the mobile browser of Firefox on this device, Firefox version 30.0.

Now, if I use word-break:break-all, that does work, but words are broken off anywhere, which looks terrible. With word-break:break-word, only the URL and the list of numbers with the slash (10.6.x/10.7/10.8/10.9) are broken just about anywhere (some browsers like both Chromes on the 5.1 device at least break of after the /, which looks better, unlike the Chrome on the 4.0.4 device which breaks anywhere), which is ok with me.

I have tried word-wrap:break-word; but that doesn't work and also doesn't work on some of the browsers in which word-break:break-word worked. I have also tried some other suggestions found on answers on this site, but can't get any of them to work. I also think many of them are referring to the desktop version of Firefox.

So, how can I get words to be broken nicely in Firefox's mobile browser, Version 30.0, so that they do not extend beyond the width of the screen and therefore not require horizontal scrolling to view all of the content, while at the same time being able to keep the correct breaking and display on other mobile browsers?

Here is the browser's user agent:

Mozilla/5.0 (Android; Mobile; rv:30.0) Gecko/30.0 Firefox/30.0

FYI: Just in case you are wondering what's the purpose of the table, it's because I don't want to have to apply inline breaking style to every long word. This is being done on an e-commerce site in which I have no access to the head tag, so I can only use Internal style sheet or Inline styles. I don't know if external style sheets would work, but I prefer not to go that route.

Answer 1

You can use

word-wrap: break-word;

It does the trick in firefox.