CODEWITHSUNDEEP
javascripthtmlcssword-wrap
Joshua Smith
Joshua Smith

Reputation: 3809

How to manually manage text wrapping in HTML

When working with designers, they often are very picky about word wrap in the completed HTML page. Assuming that I'm working on a fixed layout (not-responsive), and the designer does not like the way text is wrapping, I can:

(In my case, I'm designing for a specific mobile device, so I know the screen size, and can control the fonts. Also, making the designers happy is non-negotiable.)

The issue that I keep running into is that the text or layout will be updated later, and relics of this specific word wrap concern, which no longer apply, introduce issues we then need to fix.

So I'm wondering if anyone can suggest a strategy that:

  1. Allows completely arbitrary control of word wrap in individual cases; but,
  2. Doesn't make everything so hard to maintain going forward

I'm open to procedural, algorithmic (javascript), or CSS-oriented suggestions.

Upvotes: 3

Views: 1557

Answers (2)

Joshua Smith
Joshua Smith

Reputation: 3809

Here is the strategy I chose. Time will tell how maintainable it is.

  1. Do not edit the text content
  2. Fix wrapping by adding CSS classes that change the way the text flows, but do not use attributes like width or padding that are already being used to control layout

Specifically:

.tighten {
    letter-spacing: -0.011em;
}
.loosen {
    letter-spacing: 0.011em;
}
.hyphenate {
    -webkit-hyphens: auto;
    -webkit-hyphenate-limit-after: 4;
    -webkit-hyphenate-limit-before: 4;
}

It turns out that these imperceptible changes in spacing can make a huge difference in wrap. I actually have several variations of these classes, so I can try progressively more or less space to fix wrapping.

In severe cases, I use the hyphenate class (I'm only targeting iOS in this case).

In a future revision, when we change the text in a div, we can just remove the tighten, loosen, or hyphenate class from that div, and see if there are any wrap issues we need to correct. If there are, we go through the original trial-and-error of seeing which class gives the best look.

Upvotes: 1

Gimmy
Gimmy

Reputation: 3911

Use <pre> tag so you can insert preformated text.

Upvotes: 0

Related Questions