Skip to content

Technology Forum

SEO, Speed Up website, Server Optimization, Linux, Open Source Softwares

  • Home
  • General
    • Web Server
    • Website Formatting
  • IT Companies
  • Optimization
    • PHP
  • Linux
  • Home
  • Websites
  • CSS
  • Word Wrap long text in HTML
PHP
Enable memcache in WAMP
PHP
Plesk/Odin Services Structure
General
Search Engine Optimization
Websites
How to Force detecting the Social Profiles associated with a Website
Linux
Linux Commands
PHP
Goodbye to DDOS

Word Wrap long text in HTML

Posted on October 3, 2015October 3, 2015 By admin No Comments on Word Wrap long text in HTML
CSS

In HTML a very long text is not automatically wrapped. Especially if there are no spaces in your string your browser doesn’t necessarily know where it should break the line.

In most cases you don’t want the people use the horizontal scrollbar to read the entire text but CSS allows you to force the browser to show all the text in multiple lines. CSS offers the properties white-space and word-wrap for this purpose.


div {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word;
}

After applying the above rules on your text containers the result looks as desired.

Different browsers don’t handle long text the same way. In firefox the long text got already wrapped without the CSS rules applied. It was able to detect special characters that were url-encoded and broke the lines on these positions.

Nonetheless you should never rely on this automatic detection but teach every browser that you really want to wrap so that you get the same result everywhere.

Tags: teach browser Wrap text

Post navigation

❮ Previous Post: Plesk/Odin Services Structure
Next Post: Remove Apps from Windows 10 ❯

Leave a Reply Cancel reply

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

View Posts

  • PHP FPM modification – Plesk
  • HTML: Link rel – Preload
  • HTML: Attributes of rel
  • Linux Commands
  • Security HTTP Headers

Categories

  • Domain Name
  • General
    • Servers
    • Web Server
    • Website Formatting
  • IT Companies
  • Linux
  • MySQL
  • Optimization
    • PHP
  • Troubleshooting
  • Web Hosting Control Panel
    • Plesk Panel
  • Websites
    • CSS
    • HTML
    • Optimization
  • Windows
    • Windows 10

Recent Posts

  • PHP FPM modification – Plesk
  • HTML: Link rel – Preload
  • HTML: Attributes of rel
  • Linux Commands
  • Security HTTP Headers

Copyright © 2025 Technology Forum.

Theme: Oceanly News by ScriptsTown