Implementation of forced line breaks and non-line breaks in div, td, p and other containers in HTML
|
1. Force no line break and end with an ellipsis. Copy code The code is as follows:<div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" > Hello friends, friends, why can't I see the effect? </div> 2. CSS automatic line break Copy code The code is as follows:div{ word-wrap: break-word; word-break: normal; } 3. CSS forces English words to break Copy code The code is as follows:div{word-break:break-all;} If divs are nested, to make the inner div wrap automatically according to the content, you only need to set the width of the outer div and white-spance:nowrap. word-break:break-all and word-wrap:break-word can automatically wrap the contents of a container such as a DIV The difference between them is: 1. word-break:break-all For example, if the div is 200px wide, its content will automatically wrap at 200px. If there is a long English word at the end of the line (such as congratulation), it will truncate the word and the end of the line will be conra (the front part of congratulation) and the next line will be the back part of conguatulation (conguatulation). 2. word-wrap:break-word The example is the same as above, but the difference is that it will treat the entire word "congratulation" as a whole. If the width at the end of the line is not enough to display the entire word, it will automatically put the entire word on the next line instead of truncating the word. 3. word-break;break-all Supported versions: IE5 and above. This behavior is the same as normal for Asian languages. Also allows arbitrary word breaks in lines of text for non-Asian languages. This value is suitable for Asian text that contains some non-Asian text. WORD-WRAP:break-word Supported versions: IE5.5 The above content will wrap within the boundary. Word-breaks will also occur if necessary. The table automatically wraps to avoid expansion. word-break : normal | break-all | keep-all parameter: normal : Follows the text rules for Asian and non-Asian languages, allowing line breaks within words break-all : This behavior is the same as normal for Asian languages. Also allows arbitrary word breaks in lines of text for non-Asian languages. This value is suitable for Asian text that contains some non-Asian text keep-all : Same as normal for all non-Asian languages. For Chinese, Korean, and Japanese, word breaks are not allowed. Syntax for non-Asian text containing small amounts of Asian text: word-wrap : normal | break-word parameter: normal: Allows the content to push beyond the specified container boundaries break-word : The content will wrap within the boundary. If necessary, word breaks also occur. Description: Set or retrieve whether to break the line when the current line exceeds the boundary of the specified container. The corresponding script feature is wordWrap. Please see my other books. Syntax: table-layout : auto | fixed Parameters: auto : the default automatic algorithm. The layout will be based on the contents of each cell. The table is not displayed until each cell has been read and calculated. Very slow fixed: Fixed layout algorithm. In this algorithm, horizontal layout is based only on the width of the table, the width of the table border, the cell spacing, and the column width, and has nothing to do with the table content. Description: Set or retrieve the layout algorithm of the table. The corresponding script attribute is tableLayout. Suggestion: word-break will display problems when detected by 3C, which will also cause problems with Baidu snapshots - OPERA FIREFOX browsers do not support this attribute. The word-break attribute can be replaced by white-space:normal;, so that the line can be wrapped correctly in FireFox and IE. And please note that the spaces between words cannot be used as a replacement, otherwise the line cannot be wrapped correctly. |
<<: MySQL optimization query_cache_limit parameter description
>>: Vue uses openlayers to load Tiandi Map and Amap
Recommend
Mini Program implements list countdown function
This article example shares the specific code for...
jQuery implements accordion small case
This article shares the specific code of jQuery t...
How to remove MySQL from Ubuntu and reinstall it
First delete mysql: sudo apt-get remove mysql-* T...
Detailed explanation of client configuration for vue3+electron12+dll development
Table of contents Modify the repository source st...
Linux touch command usage examples
Detailed explanation of linux touch command: 1. C...
Solution to the problem of invalid line-height setting in CSS
About the invalid line-height setting in CSS Let&...
jQuery implements ad display and hide animation
We often see ads appear after a few seconds and t...
Optimizing the performance of paging query for MySQL with tens of millions of data
When the amount of data in MySQL is large, limit ...
SQL interview question: Find the sum of time differences (ignore duplicates)
When I was interviewing for a BI position at a ce...
JavaScript implements product details of e-commerce platform
This article shares a common example of viewing p...
Comparison of storage engines supported by MySQL database
Table of contents Storage Engine Storage engines ...
Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine
1. On a networked machine, use the default centos...
How to use the dig/nslookup command to view DNS resolution steps
dig - DNS lookup utility When a domain name acces...
A brief discussion on the principle of React two-way data binding
Table of contents What is two-way data binding Im...
JavaScript array merging case study
Method 1: var a = [1,2,3]; var b=[4,5] a = a.conc...