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
Solution to interface deformation when setting frameset height
Currently I have made a project, the interface is ...
Implementation of static website layout in docker container
Server placement It is recommended to use cloud s...
Learn the black technology of union all usage in MySQL 5.7 in 5 minutes
Performance of union all in MySQL 5.6 Part 1:MySQ...
Detailed explanation of Vue's front-end system and front-end and back-end separation
Table of contents Overview Front-end knowledge sy...
html base url tag
Its function is to set a global style. Then your s...
Ubuntu 16.04 installation tutorial under VMware 12
This article shares with you the installation tut...
How to use CSS media query aspect-ratio less
CSS media query has a very convenient aspect rati...
Problems with creating placeholders for HTML selection boxes
I'm using a placeholder in a text input and i...
How to get/calculate the offset of a page element using JavaScript
question By clicking a control, a floating layer ...
Discussion on image path issues in css (same package/different package)
In CSS files, sometimes you need to use background...
XHTML Getting Started Tutorial: What is XHTML?
What is HTML? To put it simply: HTML is used to m...
Detailed explanation of the watch listener example in vue3.0
Table of contents Preface The difference between ...
Detailed explanation of the case of dynamically generating tables using JavaScript
Table of contents Preface Implementation ideas Im...
Detailed explanation of Linux commands sort, uniq, tr tools
Sort Tool The Linux sort command is used to sort ...
MySQL5.7.27-winx64 version win10 download and installation tutorial diagram
MySQL 5.7 installation We are learning MySQL data...