There are often comments and annotations in ancient novels. In order to distinguish the main text and annotations, the annotations are usually typed into a double-line format with a comment. We know that in Word , you only need to select the comment text first, and then use the "Double Lines into One" command in the character scaling tool group on the "Paragraph" panel of the "Start" menu to easily achieve the double-line clipping effect. As shown below:
So, how to achieve such an effect in an HTML file?
In HTML , there is a display layout called flex . As long as you define a container with flex layout, the direct child elements of this container become flex elements, thus simulating the double-line batch effect above. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Flex Words</title>
<style type="text/css">
.container {
display: flex; /*Use flex layout mode*/
flex-direction: row;/*Arrangement direction of child elements*/
justify-content: left; /*Container alignment*/
align-items: center;/*Alignment of sub-elements, mainly relying on this to achieve vertical alignment of text*/
flex-wrap: wrap;/*Implement multi-line Flex container*/
}
.content{
font-size:1.4em;
}
.comment{
font-size:0.5em;
}
span{
display:inline;
}
</style>
</head>
<body>
<div class="container">
<span class="content">In order to prepare for the choice of escorting princesses and princesses to school, they can serve as talented people and philanthropists. </span>
<span class="comment" style="width:20em;">[Jiaxu Side] A paragraph of praise and praise that has never been seen in novels throughout the ages. </span>
<span class="content">Secondly, since the death of Xue Pan's father, all the business bureaus, general managers, clerks, etc. in various provinces, seeing that Xue Pan was young and ignorant of the world, took advantage of the opportunity to kidnap him. Secondly, since the death of Xue Pan's father, After that, all sales undertakings in each province The bureaus, general managers, clerks, etc., seeing that Xue Pan was young and ignorant of the world, took advantage of the opportunity to kidnap him. Secondly, since the death of Xue Pan's father, all the business bureaus, general managers, clerks, etc. in various provinces, seeing that Xue Pan was young and ignorant, Knowing the world, he took advantage of the opportunity to kidnap him.</span>
<span class="comment" style="width:12em;">【Browsing】I cry for the founders. </span>
</div>
<div class="container">
<p class="content">This is another text</p>
<p class="comment" style="width:8em;">This is a two-line comment</p>
<p class="content">This is text in another paragraph</p>
<p class="comment" style="width:6em;">Example of combining two rows into one</p>
</div>
</body>
</html>The above page displays as follows:
As can be seen from the picture above, flex layout still has great limitations compared to Word . First, when the size of the sub-element exceeds the width or height of the container, even if flex-wrap: wrap is used, it still cannot prevent the element from being too large. Different sub-elements are displayed in new lines (even if the sub-element is an inline element span ). Secondly, for all content that needs to be displayed in two lines, the appropriate width needs to be determined for each piece of content, otherwise there will be no ideal double-line batch display effect.
In HTML , you can also use table element to achieve the double-row clipping effect, but it is more complicated than flex layout code, and the effect is not necessarily more ideal. It seems that there is still a long way to go to realize the double-line batch effect in HTML !
This concludes this article on the use of Flex layout in HTML to achieve the double-line batching effect. For more information on HTML double-line batching, please search previous articles on downcodes.com or continue to browse the following related articles. Hope Please support downcodes.com more in the future!