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
Ubuntu starts the SSH service remote login operation
ssh-secure shell, provides secure remote login. W...
MySQL 5.7.11 zip installation and configuration method graphic tutorial
1. Download the MySQL 5.7.11 zip installation pac...
Detailed explanation of real-time backup knowledge points of MySQL database
Preface The need for real-time database backup is...
Tutorial on deploying jdk and tomcat on centos7 without interface
1. Install xshell6 2. Create a server connection ...
Pure CSS to solve the ceiling and bottom suction in H5 layout implementation steps
What products do you want to mention? Recently, t...
How to install git on linux
1. Introduction Git is a free, open source distri...
VMware virtual machine to establish HTTP service steps analysis
1. Use xshell to connect to the virtual machine, ...
Problems encountered in the execution order of AND and OR in SQL statements
question I encountered a problem when writing dat...
How to view and execute historical commands in Linux
View historical commands and execute specified co...
Detailed explanation of commonly used CSS styles (layout)
Compatible with new CSS3 properties In CSS3, we c...
Detailed explanation of axios encapsulation and API interface management in React project
Table of contents Preface Install Introduction Sw...
VMware installation of Ubuntu 20.04 operating system tutorial diagram
Memo: Just experience it. Record: NO.209 This exa...
Absolute path URL and relative path URL in html and subdirectory, parent directory, root directory
An absolute URL is used to represent all the conte...
CSS3 achieves cool 3D rotation perspective effect
CSS3 achieves cool 3D rotation perspective 3D ani...
HTML sub tag and sup tag
Today I will introduce two HTML tags that I don’t...