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
Web Server
Security HTTP Headers
General
Overview of SSL Certificates
Plesk Panel
Parallels Plesk for Linux services logs and configuration files
Optimization
Check PageSpeed
Optimization
Tools for Optimizing Images
Optimization
Add Trailing Slash to URL (.htaccess)

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 *

Enter Captcha Here : *

Reload Image

View Posts

  • HTML: Link rel – Preload
  • HTML: Attributes of rel
  • Linux Commands
  • Security HTTP Headers
  • WCAG 2.0 checklist

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

  • HTML: Link rel – Preload
  • HTML: Attributes of rel
  • Linux Commands
  • Security HTTP Headers
  • WCAG 2.0 checklist

Copyright © 2023 Technology Forum.