CSS WrapWe will comprehend the CSS wrap in this article. The wrap properties in CSS are used to wrap the text or element within the container. There are various CSS wrap properties, which are as follows: Flex-wrapIt is utilized to define that the flexible items should either be wrapped or not. Syntax:The flex-wrap is the CSS property in the above syntax, and the value given to this property can be wrap, nowrap, wrap-reverse, initial, and inherit. The values are discussed below:
Note: The elements must be flexible; only then the "flex-wrap" CSS property will show its effects which means the "display" CSS property of elements must be set to flex.DemonstrationLet us comprehend the flex-wrap property with the help of the demonstration. We will set the flex-wrap to wrap, nowrap, wrap-reverse, initial, and inherit. Code: Output: We can witness the output in which the flex-wrap property is applied. Word-wrap:It is utilized to break long words or to prevent the breaking of long words when the container overflows. Syntax:The word-wrap is the CSS property in the above syntax, and the value given to this property can be break-word, normal, initial, and inherit. The values are described below:
Demonstration:Let us understand the word-wrap property with the help of the demonstration. We will set the word-wrap to normal, break-word, initial, and inherit. Code: Output: We can witness the output in which the word-wrap property is applied. Paragraphs 1, paragraph 3, and paragraph 4 show the words overflowing from the container when the word-wrap property is set to either normal, initial, or inherit. Paragraph 2 displays the breaking of long words when the word-wrap property is set to break-word. Overflow-wrapIt is utilized to prevent or break the lines when the container overflows. Syntax:The overflow-wrap is the CSS property in the above syntax, and the value given to this property can be normal, break-word, anywhere, initial, and inherit. The values are discussed below:
Illustration:Let us comprehend the overflow-wrap property with the help of the illustration. We will set the overflow-wrap to normal and break-word. Code: Output: We can witness the output in which the overflow-wrap property is applied. Paragraph 1 shows the words overflowing from the container because the overflow-wrap property is set to normal, and paragraph 2 displays the breaking of long words because the overflow-wrap property is set to break-word. Browser Support:Following are the browsers that support CSS wrap properties:
ConclusionWe have comprehended the CSS wrap in this article. We have seen various CSS wrap properties:
Next TopicHow to Remove Scroll Bar in CSS
|