Greasy Fork

What Code Do I Use to Force Text Wrap?

I'm using an Android browserr called Habit. I'm also using a user script with it shown below. The user script works very well. But on some sites, text isn't wrapped. What code do I use to force text wrap?




// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.3
// @include *
// ==/UserScript==

var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: #333333 !important; } a { color: aqua !important; }";
document.getElementsByTagName('body')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");

Add word-wrap: break-word !important; after * {

This is basic CSS, you don't even have to "learn to code", and you can find many answers just by googling "css do something" - just don't forget to add !important to those css rules.

Add word-wrap: break-word !important; after * {

This is basic CSS, you don't even have to "learn to code", and you can find many answers just by googling "css do something" - just don't forget to add !important to those css rules.

Hi wOxxOm.. I added the code you suggested as the last line to the entire code. It looks like this. But it doesn't work. Please take a look and let me know if what I did was correct.. Thanks.



// ==UserScript==
// @name Userscript to Change Color of Font
// @author Tommy Smith
// @description Userscript for a browser for your Android phone.
// @version 0.3
// @include *
// ==/UserScript==

var css = document.createElement('style');
css.type = "text/css";
css.innerHTML = "* { color: white !important; } *:not([class*='overlay']) { background-color: #333333 !important; } a { color: aqua !important; }";
document.getElementsByTagName('body')[0].appendChild(css);
document.getElementsByTagName("body")[0].setAttribute("bgcolor", "darkgray");
document.getElementsByTagName("body")[0].setAttribute("text", "white");
document.getElementsByTagName("body")[0].setAttribute("alink", "aqua");
document.getElementsByTagName("body")[0].setAttribute("link", "aqua");
document.getElementsByTagName("body")[0].setAttribute("vlink", "aqua");
* { word-wrap: break-word !important;


@koolxx, you must pay more attention to what you read instead of quoting it blindly:

Add word-wrap: break-word !important; after * {

This means that you add it after * { which already exists in your code.

And you really should learn at least some basics of JS and CSS, which will take just one hour of your time but you'll be able to customize your browser knowingly.

BTW, the Quote button isn't there to Reply to a post but to meaningfully quote only some parts of it.

Hi, wOxxOm.. Ok, I got the code in correctly. But, it still deosn't work. Text still spills outside the screen. It's still not fitted.

But I got an idea. Since I'm using a user agent (Android), is it possible to force this user agent in the code? I say this because when I turn off the user script, the Android user agent takes over and fits the text. Maybe this is a possible fix?

I did read on CSS through basic online tutorials. Also, I appreciate your help. But I use the quote button to post what I need you to understand. I'm doing it for your benefit, not mine. I'd appreciate a little understanding.

Looking forward to hearing from you.

So hopefully your code now looks like css.innerHTML = "* { word-wrap: break-word !important; color: white !important; }

Without links to that sites you mentioned it's hard to say what is the exact problem, maybe adding white-space:normal !important; to the same place would help. And maybe word-break: break-all !important; too.

Hi, wOxxOm.. Yes, that's the way I entered the code, it's correctly entered. I tried also both of your other suggestions. But still doesn't work.

Here's the link to the website in question:
http://www.sosuave.com/articles/at/investing.htm

Hopefully we can nail it soon. And again, thanks for all your time and effort, brother. Looking forward to your next reply.

You'll need to add these to * {:

• word-wrap: break-word !important; to force word-wrap
• width: auto !important; to undo explicit width setting of the page elements
• max-width:100%!important; height:auto!important; to shrink images to the page width
• margin: auto !important; to remove huge margins from the content element

Then replace the contents inside { } of the existing *:not([class*='overlay']) with

• background: transparent !important; to remove the background color from all page elements
• position: inherit !important; to sequentially lay out all elements, many menus and sidebars will be repositioned after the main content

So now since everything has a transparent background you must set the color of the underlying basic element (html and body) by adding this new rule:

• html:not([class*='overlay']), body:not([class*='overlay']) { background: #333333 !important; }

You should understand the above rules and their meaning in order to maintain this code.
Here it is just for a reference: link.

Hi, wOxxOm. Thanks for replying. Although your code works well on that site, it renders other sites distorted. For example, in Afterdawn.com, the background is white and images are centered.

Also, 'FDR' in google's web page shows 3 images of Roosevelt: 2 on top and one below. Normally, the 3 images should run across, not one below the other. In Google's image search (as opposed to a web search) of Roosevelt, instead of showing thumbnails in the image gallery, the images are huge.

I included images of these distortions so you can see what I mean.

I edited your code to see if I could fix it. So far, the editt renders that site well (but not as well as your code does). But still, other sites including those mentioned become distorted. Here's the edit:

http://privatepaste.com/fe8b92fb8f

Hope there's a solution to this. Thank you as always.

Try changing @include * in this version of the script to @include http://www.sosuave.com* and make an additional script with the old version of the code that will have this:

@include *
@exclude http://www.sosuave.com*

or if the above won't work add the code before var css:

if (document.location.host=='www.sosuave.com')
  return;

Anyway, I'm not interested in this topic because it's a long process of trial and error which should be done by the interested party, that is you.

I appreciate your help but your attitude is excessively wrong. You cant expect problems to be solved when you want them to. CSS is about trial and error so your statement makes no sense. You're rudish and I suggest that as long as you carry this attitude that you refrain from helping others, especially those who know little CSS as their inexperience may greatly offend you.

Well, there's no need to get offended and get so defensive, you're a man after all. I wonder if such vulnerable attitude caused your ban on the userscripts site. You see, learning a little more of CSS and JS will actually help you in the long run much more than doing it blindly. As for me, I've been on the Net for more than 15 years and helped thousands of people and I will continue doing it because I like to learn things and share the knowledge - and the most gratifying thing is that most people, who ask for help on *technical* forums, enjoy learning new things too, so watching them grow knowledge-wise is like watching a child grow. But if you don't like to learn then yeah, I must confess that it's irritating for me so I'll probably pass on helping you, no offense man.

Not once have I insulted you. Instead, I've been respectful. I did come across posts of yours where your comments were viewed as arrogant and insulting. I wonder if you have issues with specific groups of people or just those who are inexperienced with CSS. At any rate, you can't force people to make a sudden career change and learn a complicated skill like CSS that took you years to learn if they just need help on a a single issue. If you want to keep being rude to others and getting the same negative feedback that I saw you get on your other posts, go right ahead. I'm sure your rudeness isn't getting you dates with females. Good luck with that in life. But I doubt you'll get far. I'll be asking knowledgeable people for help who are respectful and know what they're talking about. So it would be in my best interest that you skip over all my future threads without your interruptions. You're smart but your bad attitude kills it.

Man, I'm not that bad you see me at the moment due to being hurt, and many years ago I was a noobish enthusiast willing to customize my browsing experience exactly like you, so this is the reason I'm urging you on the path of learning CSS and JS. It certainly takes just a few hours of googling and trying different examples to start seeing the results, you don't have to spend years "learning" the stuff. Also, if you really think you should unload more of your wrath on me feel free to do so through private messages - this technical forum is for technical stuff.

@koolxx The problem with this is that you can not find a solution for your problem working on every page. So you will always find another page where your solution does not work. So the easiest thing is to create a solution for special pages and exclude it from all pages where it does not work. The code is given here

If you want to learn a bit more of html and css you can check codecademy as they provide courses on all different kinds of programming languages. This might help you more in understanding what does the code do and so being able to modify the given code a little bit to prevent problems on other pages :)

Man, I'm not that bad you see me at the moment due to being hurt, and many years ago I was a noobish enthusiast willing to customize my browsing experience exactly like you, so this is the reason I'm urging you on the path of learning CSS and JS. It certainly takes just a few hours of googling and trying different examples to start seeing the results, you don't have to spend years "learning" the stuff. Also, if you really think you should unload more of your wrath on me feel free to do so through private messages - this technical forum is for technical stuff.

I'm not here to flame or start a fight. I'm here to find a solution to my issue. I really do appreciate your contribution to the forum and help. If I was a bit brash, then I do take that back. Just understand that no one likes to be patronized in any way. I'm trying my best to learn a bit more about CSS in between work and family obligations, which takes up most of my time. I got a family with kids to raise and work 10 hours a day. It's not easy for me. As I said, I do take back my comments if they were harsh. You're an intelligent guy and I do enjoy your feedback. I hope that you now understand my life a llitle better. Thanks, man.

Hi, Tobbe. Yes this is true. It's just weird that such a seemingly simple issue can be so hard to find a solution for. I'll try wOxxOm's link that you suggested. Thank you and thank you, wOxxOm.