How to Wrap text in Html

In HTML, you can wrap text within an element by using the CSS white-space property. This property controls how white space and line breaks are handled within the element. There are different values you can use to achieve text wrapping:

1. normal: This is the default value, where text wraps according to the width of the container. Line breaks are inserted automatically when necessary.

<div style="white-space: normal;">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat velit, vel pellentesque arcu bibendum vel.
</div>

2. nowrap: This value prevents text from wrapping, and it continues on a single line regardless of the container width. Scrollbars may appear if the text overflows the container.

<div style="white-space: nowrap;">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat velit, vel pellentesque arcu bibendum vel.
</div>

3. pre: This value preserves whitespace and line breaks exactly as they appear in the HTML code. It maintains the formatting and spacing, ignoring the container width.

 <div style="white-space: pre;">
   Lorem ipsum
   dolor sit amet,
   consectetur adipiscing elit.
   Sed tincidunt consequat velit,
   vel pellentesque arcu bibendum vel.
 </div>

These are just a few examples of how you can control text wrapping in HTML using the white-space CSS property. You can apply this property to various HTML elements such as <div>, <p>, or <span> depending on your specific requirements. Additionally, you can also combine this property with other CSS properties like overflow to further customize the text wrapping behavior.