Line width in CSS
what is line width?
It means the width of a line in a paragraph or some text. The default width of all the lines is 100%. You can control the width of the line using the CSS “width” property. You can create two paragraph side by side using the width property. When you need to reduce or increase the size of a paragraph text you can control it using the width property.
how to control line width
<p style="width: 50%;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </p>Output:
In the above code, the <p> tag width has been set to 50% value, so only for 50%, the balance of the paragraph text displayed will be 50% empty space. You should always give the width property a value of percentage (%) because only then will your content be responsive.
how to display paragraph side by side.
<p style="width: 50%; float: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </p>
<p style="width: 50%; float: left;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. </p>Output:
In the above, the two paragraph is displayed side by side. Each paragraph line width is set to be 50% and to display side by side we can use the float” property in CSS. And you can also give the width property value as px, em, etc. You can use line-height property to fit control the line height of the paragraph text.
