Abbey Fitzgerald Web and UX Designer

Abbey Fitzgerald

UX Software Engineer and Digital Designer

Main navigation

By Filed Under: Digital Design

Formatting code and pre text

In a recent project, I came across a situation where there were varying lines of text that had to be displayed in the UI. This falls under something that I don’t work with a lot. Also, a couple of the properties have similar names, so I had to double check them to make sure I was styling things correctly (word-break, break-word, etc.).

I work on B2B web-based software and came across some long text strings that needed to keep a “coded text” look to them. On this particular project, I found there to be more text styling than usual. Because of the long text strings, CSS styling was needed to display this content correctly.

I’ll be talking through the various ways to display text and go a few ways to correct the “bad wrapping” issue. I’ve setup an experimental Codepen.

Pre and code

Pre example

Both <pre> and <code> are HTML tags that are used to display text. Pre defines what preformatted text will look like. By using this tag, spaces and line breaks are preserved since the HTML default ignores multiple spaces and line breaks. However, if the line is too long, then the <pre> tag won’t wrap the text by default. You’ll notice that it will push the boundaries of its parent. This was the issue I was running into.

Pre ad code tags

There are solutions for this and will be explained below.

Code example

This tag is a semantic way to show that the text is a code block. In most cases, this is how code samples are added to the web tutorial blog posts that you see. Without doing any customization, <code> does not preserve line breaks.

Larger blocks display best when there is some customization.

Code block example
Style needed to be adjusted with overflow-wrap: break-word;

Combining the two

Using them both is great for displaying samples on website. This way indentations and line breaks are kept in tact.

<pre><code>...</code></pre>

Options for text display

When displaying long lines of text and things that come back preformatted, word-wrap, word-break and white-space will help things display the way you’d like.

Word-wrap

Word wrap allows long words to be broken and wrap onto the next line. If is declared as break-word, a large string of text will go out of its wrapper, so this keeps everything visible.

div {
  word-wrap: break-word;
}

Setting word-wrap to break-word breaks the long string and it moves to the next line.

Code block example
Style needed to be adjusted with word-wrap: break-word;

If it is set to normal, words will not be broken and will overflow the container if they don’t have enough space.

Word wrap normal example

Overflow-wrap

This allows lines to be broken within words if an “unbreakable” string is too long to fit. This is a very well browser-supported property. Think of it as the newer word-wrap property. word-wrap goes way back and was originally an Internet Explorer only property that became standard. Both options are valid, but the current one to use would be overflow-wrap.

Code block example
Style needed to be adjusted with overflow-wrap: break-word;
div {
overflow-wrap: break-word;
}

You’ll notice that word-wrap and overflow wrap use both normal and break-word.

Note how the longer text behaves. Also, a string of non-breaking space characters will break at an appropriate spot.

Word-break

The word-break property specifies how words should break when reaching the end of a line. It’s typically used in combination with overflow-wrap.

How is this different from overflow-wrap and word-wrap? This controls the breaking of words and isn’t focused on just line breaks. A normal way to for lines to break is in a space or at a hyphen, but this can be adjusted with this property.

div {
word-break: keep-all;
overflow-wrap: break-word;
}

If you’re working with non-English content, that should be broken a certain way, word-break: keep-all is something to consider. If it’s set to break-all, any word/letter can break onto the next line. If it’s set to normal, the default will be used.

Hyphens

It’s good to mention hyphens since they play a role in how words are broken. There is the option to set hyphens to none. Manual is the default, but there is also the option for auto.

White-space

One thing to consider is that if there are multiple spaces in the code, the default is to trim those down into one space. If you’re displaying text that does have multiple spaces, you’ll want to become familiar with white space so you can specify how white space is handled.

It white-space is set to normal, multiple white spaces will collapse into a single. Lines will break the normal way, at a space or hyphen.

If it is set to nowrap, multiple white spaces will collapse into a single as well. One thing to note is that the text will never wrap to the next line, even if there are spaces between words. If it is long, this will be a problem. It will stay this way unless there is a break tag included.

This is where things get interesting. Pre is an option and it behaves like text that is wrapped in a <pre> tag. By default, in a <pre> tag, the white space displayed just like it is in the html. It will not wrap unless there’s a break in the html.

White space examples

If you’re worried about long lines with white-space: pre, pre-line multiple whitespaces will collapse into a single. This option will break lines where they break in the code. Pre-wrap will keep white spacing. Text will wrap when necessary and on line breaks.

Recent Posts

Reader Interactions

Comments

  1. I’ve recently started using https://elevateright.com/live-resin-carts/ , and they’ve exceeded my expectations. From Delta 8 products to HHC products, the benefits are undeniable. They cure break down urgency, promote sleep, and even ease minor aches. What I weakness most is that they’re non-chemical and don’t remain me idea numbed or absent from of it. The quality of hemp products makes a prodigious remainder, so I unceasingly look benefit of trusted brands. Whether you’re green to hemp or au fait, these products are a game-changer seeking complete wellness.

    Reply

  3. Delta 11 Gummies
    are honestly such a vibe! They hit just right—starting with this amazing euphoric boost that slowly eases into a super chill, relaxed feeling. Perfect for when you want to wind down after a hectic day or even get your creative juices flowing. Plus, they taste so good and are super easy to take anywhere. If you’re looking to try something new that’s smooth and powerful, these gummies are definitely worth it!

    Reply

  4. I’ve recently started using https://nexzenextracts.com/delta-11-gummies/ , and they’ve exceeded my expectations. From Delta 8 products to HHC products, the benefits are undeniable. They cure break down urgency, promote sleep, and even ease minor aches. What I weakness most is that they’re non-chemical and don’t remain me idea numbed or absent from of it. The quality of hemp products makes a prodigious remainder, so I unceasingly look benefit of trusted brands. Whether you’re green to hemp or au fait, these products are a game-changer seeking complete wellness.

    Reply

  5. Delta 11 Gummies are a game-changer for anyone looking for a next-level cannabis experience. These potent gummies offer a smooth, balanced high that kicks in with a euphoric rush and mellows into deep relaxation. Perfect for unwinding after a long day or sparking creativity, Delta-11 delivers a unique blend of uplifting energy and calming vibes. Plus, they’re super convenient and taste amazing, making them a discreet and delicious way to enjoy the benefits of Delta-11. If you’re into trying something new and powerful, these gummies are a must-have!

    Reply

  7. Is Delta 9 Legal in Iowa? Yes, hemp-derived Delta 9 THC is legal in Iowa as long as it complies with the federal guideline of containing no more than 0.3% THC on a dry-weight basis. This means you can enjoy Delta 9 gummies, edibles, and other products crafted to meet these requirements. However, marijuana-derived Delta 9 THC remains illegal for recreational use, with only limited access under Iowa\u2019s Medical Cannabidiol Program. Stay compliant and choose reputable brands like NexZen Extracts for high-quality, lab-tested Delta 9 products.

    Reply

  9. Looking for a t-shirt that will make people laugh? As a t-shirt graphic designer, I specialize in creating funny, eye-catching designs that add personality to your wardrobe. Whether it’s a clever pun, a witty saying, or a quirky graphic, these tees are perfect for anyone who loves to wear humor. Perfect for treating yourself or finding the ideal gift, these funny t-shirts are sure to spread some joy and spark a conversation! https://www.blackhatprotools.info/member.php?215123-tshirts

    Reply

  30. Link exchange is nothing else except it is just placing the other person’s web site link on your page at suitable place and other person will also do same in favor of you.

    Reply

  31. I think that everything published was actually very reasonable.
    However, consider this, suppose you composed a catchier title?
    I ain’t suggesting your content isn’t good.,
    however suppose you added something that grabbed folk’s attention? I mean Formatting code and pre text is a
    little boring. You ought to peek at Yahoo’s front page
    and note how they create news titles to
    get people interested. You might add a related video or a related
    picture or two to grab readers interested about everything’ve
    got to say. In my opinion, it might make your website a
    little bit more interesting.

    Reply

  33. Thanks for your personal marvelous posting! I definitely enjoyed reading it, you happen to be a
    great author. I will make sure to bookmark your blog and may come back someday.
    I want to encourage you continue your great posts, have a nice
    holiday weekend!

    Reply

  34. I was curious if you ever considered changing the structure of your blog?
    Its very well written; I love what youve got to say. But maybe you could a little more
    in the way of content so people could connect with it better.
    Youve got an awful lot of text for only having one or two
    images. Maybe you could space it out better?

    Reply

  42. Thanks for the marvelous posting! I actually enjoyed reading it, you are a great author.
    I will be sure to bookmark your blog and may come
    back from now on. I want to encourage continue your great posts, have a nice
    weekend!

    Reply

  43. Generally I don’t learn post on blogs, however I wish to say that this write-up very compelled me to check out and do so!
    Your writing style has been surprised me. Thanks, quite nice post.

    Reply

  45. Hello, i read your blog from time to time and i own a similar
    one and i was just wondering if you get a lot of spam feedback?
    If so how do you protect against it, any plugin or anything you can suggest?
    I get so much lately it’s driving me mad so any help is very much
    appreciated.

    Reply

  93. If this is the quality of content you consistently produce, I would love to engage more with your platform. You have done an outstanding job, and I truly appreciate the opportunity to express my admiration for your work. Thank you once again! I have subscribed to your email list and look forward to reading more blogs like this.
    Xamblog

    Reply

  94. I am truly speechless at the evidence you have presented in this content. I must commend you for the exceptional quality of your work. Keep shining brightly! I look forward to revisiting your platform and have subscribed to your blog.
    Liftdex

    Reply

  96. Very great post. I simply stumbled upon your blog and
    wanted to mention that I’ve really enjoyed surfing around your blog posts.

    In any case I’ll be subscribing on your rss feed and I am hoping you write once more very
    soon! http://gaziantep.Ogo.org.tr/question/optimisation-optimisation-des-moteurs-de-recherche-pour-les-agences-maximisez-la-visibilite-de-votre-entreprise/

    Reply

  123. That is a really good tip particularly to those fresh to the
    blogosphere. Simple but very precise info… Many thanks for sharing this one.
    A must read post!

    Reply

  135. Hello there I am so happy I found your web site, I really found you
    by mistake, while I was searching on Askjeeve for something else,
    Anyways I am here now and would just like to say cheers for
    a incredible post and a all round entertaining blog (I also love the theme/design),
    I don’t have time to read it all at the moment but I have bookmarked it and also included your RSS feeds,
    so when I have time I will be back to read a lot more, Please
    do keep up the awesome work.

    Reply

  145. Undeniably believe that which you stated. Your favorite reason appeared to be on the internet the easiest thing
    to be aware of. I say to you, I definitely get irked while people consider worries that they plainly do
    not know about. You managed to hit the nail upon the top and defined out
    the whole thing without having side-effects , people can take a signal.
    Will likely be back to get more. Thanks https://wiki.giroudmathias.ch/index.php?title=Utilisateur:NickOberle6779

    Reply

  146. Undeniably believe that which you stated. Your favorite reason appeared to be on the internet the easiest thing to be aware of.

    I say to you, I definitely get irked while people consider worries that they plainly do not know about.
    You managed to hit the nail upon the top and defined out the whole thing without having side-effects ,
    people can take a signal. Will likely be back to get more.
    Thanks https://wiki.giroudmathias.ch/index.php?title=Utilisateur:NickOberle6779

    Reply

  153. Hello there, I found your blog via Google at the same time as looking
    for a comparable subject, your web site came
    up, it appears to be like great. I’ve bookmarked it in my google bookmarks.

    Hello there, just became aware of your weblog through Google,
    and found that it is really informative. I’m gonna be careful
    for brussels. I will be grateful when you continue this in future.
    Lots of other folks can be benefited out of your
    writing. Cheers!

    Have a look at my website https://p.weavatools.com/?url=https://www.l25.cn/comment/html/?1376.html

    Reply

  154. Amazing post! Do you want to know what is an engine immobilizer is and how it works? If someone tries to start your car with the wrong key, the car’s immobilizer steps in and stops the engine from firing up. An immobilizer is a security feature in modern vehicles designed to prevent theft. View the linked site for more information.

    Reply

  163. I used to be recommended this web site by way of my cousin. I’m now not certain whether or not
    this put up is written by him as nobody else know such special approximately my problem.
    You’re incredible! Thanks!

    Reply

  175. Hey I am so excited I found your blog, I really found you by accident, while I was looking on Digg for something else,
    Anyways I am here now and would just like to say many thanks for a marvelous post and a all round enjoyable blog (I also love
    the theme/design), I don’t have time to go through it all at the minute but I have saved it and also added your RSS
    feeds, so when I have time I will be back to read a lot more, Please do keep up the superb
    jo.

    Also visit my website – https://Www.Prrpc.net/index.php/Tax_Specialists_In_Montreal:_The_Importance_Of_Seeking_Professional_Advice

    Reply

  180. Aρpreciating the time and energy you ρut into ｙouг webѕite and
    detaileed іnformation you provide. It’s good
    to come across a blog everry onmce in a whіle that isn’t
    the same ouut of date rehashed material. Fantastic read!
    I’ve ѕaved your site and I’mincluding ykur RՏS feeⅾs to my
    Google ɑccount.

    Chеck out my paɡе :: net.art

    Reply

  181. Thank you fοr every other іnfolrmative sіte. The place else may I
    get that type off information writtｅn in such aan ideal means?
    I have а project that I’m sіmply now operating on, and I’ve beｅn at the look out ffor suсh info.

    Μy weЬ site ¹«±â

    Reply

  185. I was curious if you ever considered changing the page
    layout of your blog? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people
    could connect with it better. Youve got an awful lot
    of text for only having one or 2 images. Maybe you could space it out better?

    Take a look at my page – Bolaopaulista.com

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *