If you are using a long word without any break in between then the text might extend beyond the allocated area and push out giving a bad experience to end-users.
Use the word-wrap property and set it to break-word, additionally a fixed-width needs to be specified.
For example, below is some sample text in a Div with a long word without a break. Notice, how it goes outside the allocated area (width = 300px).
This is a Div. I am going to show how a looooooooooooooooooooooooooonggggggggggggggggggggggggg text without any breaks will look like.
Now let us look at the same example, but using the word-wrap property (word-wrap:break-word). Notice how neatly the text is wrapped and aligned.
Here is the code (a fixed width is important here) -<div style="background:lightgray;width:300px;word-wrap:break-word">
This is a Div. I am going to show how a looooooooooooooooooooooooooonggggggggggggggggggggggggg text without any breaks will look like.
</div>
Output:
This is a Div. I am going to show how a looooooooooooooooooooooooooonggggggggggggggggggggggggg text without any breaks will look like.
More Posts related to Html,
- How to remove old 404 pages ulrs from Google crawler
- W3 HTML validator warning Unable to Determine Parse Mode
- Comprehensive 256 Ascii code table with Html Hex IBM Microsoft Key
- Align html element at the center of page vertically and horizontally
- HTML Images - Attributes and Formats
- 9 Border to DIV Element in HTML Examples
- Create HTML button that looks like a href hyperlink
- What is the doctype for HTML5?
- Simple Crossword Puzzle example using Pure HTML, CSS and JavaScript
- How to make a div tag clickable
- The author stylesheet specified in tag script is too long - document contains 21759 bytes whereas the limit is 10000 bytes
- W3 : character data is not allowed here html validation error
- How to set background color in HTML page?
- Auto Refresh Webpage after every x Second or Minute using Meta Tag?
- Default speed of Marquee tag : SCROLLAMOUNT
- Get HTML table td, tr or th inner content value with id or name attribute
- How to add multiple spaces between html page text
- Chessboard with pieces using pure HTML and CSS
- How to turn off autocomplete in input fields in HTML Form
- remove div vertical scroll
- Fibonacci series from 1 to 500 table
- Remove Html head and body tags from ckeditor source
- reCaptcha Verification expired. Check the checkbox again
- HTML5 CSS3 Color Codes List
- All directional arrows codes for HTML
More Posts:
- Quickly install VS Code on macOS Sonoma/Ventura - MacOS
- Read file from Windows CMD (Command Line) - Windows
- Health Status Page for OpenAI ChatGPT or GPT 4 - HowTos
- Share Image to WhatsApp with Caption from your Android App - WhatsApp
- PowerShell Alias Type Commands List for Mac - MacOS
- Get the Complete Sha256 Container ID for Docker Run Command - Docker
- Tesla hit by a complete network and mobile app outage - 23 Sept 2020 11am ET (US and Europe) - News
- Java: Convert Byte to Binary String Example - Java