Hướng dẫn wrap text css
Show Định nghĩa và sử dụngThuộc tính word-wrap sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout. Cấu trúctag { word-wrap: giá trị; } word-wrap có các giá trị như sau:
Ví dụHTML viết:
CSS viết:p { border: 1px solid #cc0000; width: 150px; } Hiển thị trình duyệt khi chưa có word-wrap:HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN Thêm thuộc tính word-wrap vào CSS:p { border: 1px solid #cc0000; width: 150px; word-wrap: break-word; } Hiển thị trình duyệt khi có word-wrap:HỌC WEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEEB CHUẨN This guide explains the various ways in which overflowing text can be managed in CSS. In CSS, if you have an unbreakable string such as a very
long word, by default it will overflow any container that is too small for it in the inline direction. We can see this happening in the example below: the long word is extending past the boundary of the box it is contained in. CSS will display overflow in this way, because doing something else could cause data loss. In CSS data loss means that some of your content vanishes. So the initial value of
In this next example, you can see what happens if To find the minimum size of the box that will contain its
contents with no overflows, set the Using If the box needs to be a fixed size, or you are keen to ensure that long words can't overflow, then the
Note: The An alternative property to try is
In this next example, you can compare the difference between the two properties on the same string of text. This might be useful if you want to prevent a large gap from appearing if there is just enough space for the
string. Or, where there is another element that you would not want the break to happen immediately after. In the example below there is a checkbox and label. Let's say, you want the label to break should it be too long for the box. However, you don't want it to break directly after the checkbox. To add hyphens when words are broken, use the CSS You can also use the This property also takes the value If you
know where you want a long string to break, then it is also possible to insert the HTML In the below example the text breaks in the location of the
|