Word wrap là gì

The overflow-wrap CSS property applies to lớn inline elements, setting whether the browser should insert line breaks within an otherwise unbreakable string lớn prevent text from overflowing its line box.

Bạn đang xem: Word wrap là gì


The source for this interactive sầu example is stored in a GitHub repository. If you"d like khổng lồ contribute lớn the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.


Note: In contrast khổng lồ word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.


The property was originally a nonstandard & unprefixed Microsoft extension called word-wrap, và was implemented by most browsers with the same name. It has since been renamed to lớn overflow-wrap, with word-wrap being an alias.

Xem thêm: ‎Ghi Am Cuoc Goi Cho Toi Trên App Store, Ghi Âm Cuộc Gọi


/* Keyword values */overflow-wrap: normal;overflow-wrap: break-word;overflow-wrap: anywhere;/* Global values */overflow-wrap: inherit;overflow-wrap: initial;overflow-wrap: unset;The overflow-wrap property is specified as a single từ khóa chosen from the các mục of values below.


normal Lines may only break at normal word break points (such as a space between two words). anywhere To prsự kiện overflow, an otherwise unbreakable string of characters — like a long word or URL — may be broken at any point if there are no otherwise-acceptable break points in the line. No hyphenation character is inserted at the break point. Soft wrap opportunities introduced by the word break are considered when calculating min-content intrinsic sizes. break-word The same as the anywhere value, with normally unbreakable words allowed to be broken at arbitrary points if there are no otherwise acceptable break points in the line, but soft wrap opportunities introduced by the word break are NOT considered when calculating min-nội dung intrinsic sizes.

Initial valueApplies toInheritedComputed valueAnimation type
normal
non-replaced inline elements
yes
as specified
discrete


This example compares the results of overflow-wrap, word-break, và hyphens when breaking up a long word.

Xem thêm: Windows 7 - How To Fix The Program Cant Start Because Api

HTML

p>They say the fishing is excellent at Lake em class="normal">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I"ve sầu never been there myself. (code>normalcode>)p>p>They say the fishing is excellent at Lake em class="ow-anywhere">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I"ve never been there myself. (code>overflow-wrap: anywherecode>)p>p>They say the fishing is excellent at Lake em class="ow-break-word">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I"ve never been there myself. (code>overflow-wrap: break-wordcode>)p>p>They say the fishing is excellent at Lake em class="word-break">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I"ve never been there myself. (code>word-breakcode>)p>p>They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I"ve sầu never been there myself. (code>hyphenscode>, without code>langcode> attribute)p>p lang="en">They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I"ve sầu never been there myself. (code>hyphenscode>, English rules)p>p class="hyphens" lang="de">They say the fishing is excellent at Lake em class="hyphens">Chargoggagoggmanchauggagoggchaubunagungamauggem>, though I"ve sầu never been there myself. (code>hyphenscode>, German rules)p>CSSp width: 13em; margin: 2px; background: gold;.ow-anywhere overflow-wrap: anywhere;.ow-break-word overflow-wrap: break-word;.word-break word-break: break-all;.hyphens hyphens: auto;Result


Specification Status Comment
CSS Text Module Level3The definition of "overflow-wrap" in that specification. Candidate Recommendation Initial definition

Initial valueApplies toInheritedComputed valueAnimation type
normal
non-replaced inline elements
yes
as specified
discrete


Browser compatibility

BCD tables only load in the browser


See also


Found a problem with this page?

Last modified: Mar 15, 2021, by MDoanh Nghiệp contributors

Change your languageSelect your preferred language English (US)DeutschFrançais日本語한국어Português (doBrasil)Русский中文 (简体) Change language
Learn CSS CSS first steps CSS building blocks Styling text CSS layout Reference Modules Properties Selectors Pseudo-classes Pseudo-elements At-rules Types Guides Animations Backgrounds & Borders Box alignment Box Mã Sản Phẩm Columns Conditional rules CSSOM view Flexbox Flow layout Fonts Grid Images Lists & counters Logical properties Media queries Positioning Scroll snap Shapes Text Transforms Transitions Layout cookbook Tools

Chuyên mục: Theme wordpress