The following paragraph contains long text that spills out of the box containing it.
text-overflow: clip:
TipsMake.com is a social network about science and technology
text-overflow: ellipsis:
TipsMake.com is a social network about science and technology
Example 2: Display the overflowed content when hovering over the element:
div.test:hover { overflow: visible; }
Hover over the two divs below, to see the entire text.
TipsMake.com is a social network Association of science and technology
TipsMake.com is a social network about science and technology
Word Wrap
The word-wrap attribute allows text to be downstream if it's too long, which can cause a word break.
The two most typical values are:
normal: display by default, long words may be spilled out of the box (default)
break-word: the text jumps down the line if the word is too long, can cause a word break.
Example: Processing text too long
p1 { word-wrap: normal; }
p2 { word-wrap: break-word; }
Results show:
Full code:
Word-wrap attribute
WebsiteTransportation Network Web SiteVietnamese Network is a social network about science learn technology.
WebsiteTransportation Network Web SiteVietnamese Network is a social network about science learn technology.
Word Break
Word-wrap determines whether or not the line is down, and the work-break attribute determines the type of flow.
Common values are:
normal: display by default, long words may be spilled out of the box (default)
Keep-all: not used with Chinese / Japanese / Korean (CJK) text, the same function as normal . The difference is that if the word has a hyphen, it will be downstream in an appropriate location.
break-all: when the period ends, a word will automatically disconnect at any character to get down the line, which can cause a word break.
break-word: when the period ends, it will automatically break at any word to get down.
If it is normal text, we will use break-word more, and break-all is usually used only for numbers (if any).
For example: The work-break attribute determines the type of flow
pa { word-break: normal; }
pb { word-break: keep-all; }
pc { word-break: break-all; }
pd { word-break: break-word; }
Word-break properties
word-break: normal (default):
WebsiteTransporting Network Web SiteVietnamese Network is a social network of science technology.
word-break: keep-all:
WebsiteTranslation Website Web Site Network is a network-society-about-science- technology.
word-break: break-all:
Website QuanTruongMay is a social network of science and technology.
word-break: break-all:
Website QuanTruongMay is a social network of science and technology.
Writing Mode
Writing-mode properties are used to style text that is placed horizontally or vertically.
Values of writing-mode:
horizontal-tb: the text will be placed horizontally from left to right, reading from top to bottom (default).
vertical-rl: the text is placed vertically from right to left, reading from top to bottom.
vertical-lr: the text is placed vertically from left to right, reading from top to bottom.
Example: Using writing-mode
p.test1 { writing-mode: horizontal-tb; }
p.test2 { writing-mode: vertical-rl; }
p.test3 { writing-mode: vertical-lr; }
Results show:
Full code:
The writing-mode Property
writing-mode: horizontal-tb;
You can become a part of TipsMake.com by Submit articles, experience your technology to the content management team of the social network via email info@meta.vn or register an account and post directly on TipsMake.com.
writing-mode: vertical-rl;
You can become a part of TipsMake.com by Submit articles, experience your technology to the content management team of the social network via email info@meta.vn or register an account and post directly on TipsMake.com.
writing-mode: vertical-lr;
You can become a part of TipsMake.com by Submit articles, experience your technology to the content management team of the social network via email info@meta.vn or register an account and post directly on TipsMake.com.