Text line width in html

Line width in CSS

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

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.
 

In the above code, the

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.

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.
 
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.
 

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.

Leave a Reply Cancel reply

You Might Also Like

How to Make Cursive Font HTML | Step by Step Guide

How to Add and Use CSS Comments Tag | CSS New Tricks

CSS :link() Pseudo Class Selector | Advanced Guide

November 4, 2022

How To Select Elements With Class Name ‘Test’ in CSS

How to Create Radial Gradient Background in CSS

What is External Style Sheet HTML

Easy Way to Disable Checkbox in CSS

September 25, 2022

Источник

HTML Horizontal Line – HR Tag Example

Kolade Chris

You can use the HTML

tag to separate out different topics on a page.

We often use this tag when we want to create a thematic break or separate items on an HTML page.

In this article, you’ll learn how to use this tag in your HTML code.

Table of Contents

• Basic Syntax
• Attributes of
  

  ---

  Tag

• The Width Attribute
• The Color Attribute
• The Size Attribute
• The Align Attribute
• Conclusion

Basic Syntax

The

tag is an empty element. This means that it only has an opening tag,

.

Starting in HTML5, we now need to attach a slash to the tag of an empty element. So, instead of having just

, you should make it

.

In browsers, the

tag is displayed as a horizontal rule or line, like this:

Attributes of

---

Tag

The

tag accepts attributes such as width , color , size , and align .

Before showing you how the individual attributes look and work, I will be setting everything in the body to center with this CSS code:

The Width Attribute

The width attribute is used for specifying a width for the

tag. It takes pixels or percentage as a value.

The Color Attribute

The color attribute is used to specify a color for the

tag.

Here is how it would look if we set a green color for the

tag:

The Size Attribute

You can define a height for the

tag with the size attribute. The value must be set in pixels.

A height of 50px looks like the screenshot below:

The Align Attribute

The align attribute is used to set an alignment for the

tag. It takes left , center and right values.

The default is left – meaning if an alignment is not set, the

tag automatically aligns to the left.

Setting an alignment of right for the

tag looks like this:

Conclusion

This article shows you what the

tag looks like, what it is used for, and the attributes it accepts.

Since the

tag appears as a horizontal rule in browsers, you might be thinking of using it to draw a line.

But you shouldn’t do this because the horizontal rule appears as is only presentationally, not semantically. Instead, you should draw a line with a div or span as the case may be.

If you find this article helpful, share it with your friends and family.

Kolade Chris

Web developer and technical writer focusing on frontend technologies. I also dabble in a lot of other technologies.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp’s open source curriculum has helped more than 40,000 people get jobs as developers. Get started

freeCodeCamp is a donor-supported tax-exempt 501(c)(3) charity organization (United States Federal Tax Identification Number: 82-0779546)

Our mission: to help people learn to code for free. We accomplish this by creating thousands of videos, articles, and interactive coding lessons — all freely available to the public. We also have thousands of freeCodeCamp study groups around the world.

Donations to freeCodeCamp go toward our education initiatives, and help pay for servers, services, and staff.

Источник

HTML P tag | HTML paragraph tag | break, font size, line space, indent

HTML P Tag is textual element. It’s also called an HTML Paragraph Tag. It’s a block-level element and always starts with a new line. In this tutorial, you will learn about HTML tag basic and its attribute.

  
This is HTML P tag 
Its break to next line