Sometime when I view code on Stack Overflow and some lines are pretty long, I'll have to awkwardly scroll horizontally in order to view the rest of it and then scroll back and continue reading. Like the following example:

public class KeyValuePairJsonConverter : JavaScriptConverter {
    public override object Deserialize(IDictionary<string, object> dictionary, Type type, JavaScriptSerializer serializer) {
        throw new InvalidOperationException("Sorry, I do serializations only.");
    }

    public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer) {
        Dictionary<string, object> result = new Dictionary<string, object>();
        Dictionary<string, MyClass> dictionaryInput = obj as Dictionary<string, MyClass>;

        if (dictionaryInput == null) {
            throw new InvalidOperationException("Object must be of Dictionary<string, MyClass> type.");
        }

        foreach (KeyValuePair<string, MyClass> pair in dictionaryInput)
            result.Add(pair.Key, pair.Value);

        return result;
    }

    public override IEnumerable<Type> SupportedTypes {
        get {
            return new ReadOnlyCollection<Type>(new Type[] { typeof(Dictionary<string, MyClass>) });
        }
    }
}

All of my code editors have word wrap turned on to avoid this situation.

I know it's always good to intentionally keep code horizontally within the current view by using line breaks, but you can't expect everyone to do that, and it should be okay not to do it.

What is the reason behind not using word wrap by default in code blocks? Or any code editor for that matter.

  • 8
    Code of some languages break if put in a new line. That would lead to the conclusion that the code is wrong just because word-wrap is on. And BTW none of my code editors have word-wrap turned on. – juergen d Feb 21 '14 at 18:55
  • 8
    How do you propose to wrap the code and handle indentation? What about wrapping in the middle of a long line of code that makes it hard to read. Wouldn't it be better if the poster actually puts the line breaks in convenient spot rather than making the markdown editor decide for you? – psubsee2003 Feb 21 '14 at 18:57
  • 4
    Interestingly, code does wrap on the mobile site. I consider this a bug more than a feature though – mhlester Feb 21 '14 at 18:59
  • 1
    @mhlester Probably just to improve usability on mobile. Having scroll bars on elements on the page can make it hard or even impossible to use the page on a touch screen. – 3ventic Feb 21 '14 at 19:00
  • 1
    You don't get scroll bars. You just have to drag. It's easier to scroll horizontally on a touch screen than a pc – mhlester Feb 21 '14 at 19:01
  • @3ventic meta.stackexchange.com/questions/139187/… – bjb568 Feb 21 '14 at 19:02
up vote 12 down vote accepted

In order to make word wrapping for code viable, we would also need line numbers, and the layout of the code can matter, code can break or work depending on new lines.

Wrapping automatically would confuse most users who are not used to it while the current behavior is just a minor annoyance to those who prefer code to be wrapped.

  • 4
    "In order to make word wrapping for code viable, we would also need line numbers" - That's all that really matters out of that entire answer. You can't just go wrapping code without some indication that it was wrapped. – animuson Feb 21 '14 at 19:02
  • 1
    @animuson: Note that the syntax highlighter we're using can do automatic line numbering, we just haven't turned on that feature. Of course, there are also some reasonable arguments against doing so. – Ilmari Karonen Feb 21 '14 at 19:23

@animuson said: "You can't just go wrapping code without some indication that it was wrapped." - one might as well say, "You can't just go cutting code off the right hand side of the box without some indication it was cut off."

Currently there is no indication, except that if you scroll down to the bottom of the CODE box you see a horizontal scrollbar. But most people start reading code without scrolling down to the end of it first. And it's expected that when users see a line ending with "dictionary, Typ" then they know it's not the real end of the line. Turning on word wrapping would create an analogous situation: users would see a line starting with "Type type, JavaScriptSerializer" and no indentation, and they would realize that it continues from the previous line. Line numbers or not (I don't need line numbers). If you really need to know whether something is word-wrapped, try selecting two consecutive lines. If there is a trailing space at the end of the first line, it was probably wrapped. Much easier than scrolling horizontally in my opinion, you can see the whole line at once.

People are going to be confused whatever you do. Clearly it would be better to show more information than less. I find it hard to use the site as it is, having to use my mouse to scroll to see code blocks, first one half of a line, then the other half, like peek-a-boo, when so much horizontal real-estate is taken up by side links and "HOT META POSTS". If I use a bit of code, I start by copying it into an editor. Then the actual line breaks are preserved. Does anyone not do this?

Honestly, I find it hard to think of an example where word-wrapped code is actually going to confuse somebody. Can the detractors provide an example? A Python snippet maybe? Most languages don't have syntactic indentation.

Maybe I have poor vision from staring at the sun too much, and that's why nobody else seems to mind - they just put their screens on "tiny". Well at the very least it should be configurable for poor fools like me; the OP said "by default", but when Googling I couldn't find a way to configure this. Couldn't see anything under "Edit Profile & Settings > SITE SETTINGS". Here's what I ended up doing in Firefox, maybe other people reading this question will find it useful:

  1. Edit ~/.mozilla/firefox/*Default\ User/chrome/userContent.css
  2. Add these lines somewhere:

    /* https://support.mozilla.org/en-US/questions/1048311 */
    pre,code {
      white-space:pre-wrap !important;
      word-wrap:break-word !important;
    }
    
  • 1
    That workaround is pretty excessive. Just get Stylus or some other user-style addon (Firefox still supports addons, right?) and write a new style for stackexchange.com. – Nathan Tuggy Sep 14 at 8:37
  • Adding four lines to a file is excessive? Or you mean because they apply to every site? Anyway, thanks for the pointer to Stylus... – Metamorphic Sep 14 at 9:15
  • Because it applies to every site. (Technically, userContent.css is perfectly capable of scoping rules to particular sites; it's just more tedious than using an addon, since you have to restart to change anything.) – Nathan Tuggy Sep 14 at 9:47
  • Scoping CSS - wow, didn't know about that. This is done with url-prefix() I take it? – Metamorphic Sep 14 at 18:06
  • Usually, although domain() is fine too, and I've used both. (I've never needed a full regex, I don't think.) – Nathan Tuggy Sep 14 at 18:13

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .