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
Detailed explanation of custom instructions for Vue.js source code analysis
Preface In addition to the default built-in direc...
Detailed explanation of the binlog log analysis tool for monitoring MySQL: Canal
Canal is an open source project under Alibaba, de...
Example code for implementing anti-shake in Vue
Anti-shake: Prevent repeated clicks from triggeri...
Detailed explanation of MySQL partition table
Preface: Partitioning is a table design pattern. ...
Teach you how to use Portainer to manage multiple Docker container environments
Table of contents Portainer manages multiple Dock...
Introduction to 10 Hooks in React
Table of contents What is ReactHook? React curren...
Example of configuring multiple SSL certificates for a single Nginx IP address
By default, Nginx supports only one SSL certifica...
How to use vw+rem for mobile layout
Are you still using rem flexible layout? Does it ...
Alibaba Cloud domain name and IP binding steps and methods
1 Enter the Alibaba Cloud console, find the domai...
Detailed steps for deepin20 to install NVIDIA closed-source drivers
Step 1: Install the deep "graphics driver&qu...
React uses routing to redirect to the login interface
In the previous article, after configuring the we...
About Vue's 4 auxiliary functions of Vuex
Table of contents 1. Auxiliary functions 2. Examp...
Detailed explanation of Tomcat directory structure
Table of contents Directory Structure bin directo...
Vue2.x configures routing navigation guards to implement user login and exit
Table of contents Preface 1. Configure routing na...
jQuery uses hide() and toggle() functions to realize the camera brand display hiding function
Recently, when I was learning jQuery, I came acro...