Study notes-word-break and word-wrap attributes in CSS


When writing CSS styles, you may encounter the problem of long text not wrapping. Most of the problems can be solved by using the above two attributes.

1. word-break:

The word-break attribute specifies the processing rules for automatic line wrapping.

<!-- 固定的模板 view相当于div -->
<view>
    <view class="text" style="width: 250px ">
	    11111111111,1asdasjdia,sjdioneoen,ee1231112121,,ad,a,sd
	</view>
</view>

1.1 normal: the default line break rule of the browser

1.2 break-all: Allow line break within a word

1.3 keep-all: only line breaks at half-width spaces or hyphens.

2.word-wrap:

The word-wrap attribute allows long words or URL addresses to wrap to the next line.

 2.1 normal: the default line break rule of the browser

2.2 break-word: will not break words into new lines


 

Guess you like

Origin blog.csdn.net/qq_41339126/article/details/109860703