Css break to new line after number of characters

You can use the word-wrap property in CSS to break a line of text after a certain number of characters. Here are a few ways to achieve this:

Method 1: Using word-wrap and word-break

You can use the word-wrap property to wrap the text to the next line after a certain number of characters, and the word-break property to specify the breaking point.

For example:

.text {
  word-wrap: break-word;
  word-break: break-word;
  width: 200px; /* adjust the width to your desired number of characters */
}

This will wrap the text to the next line after 200 characters.

Method 2: Using text-overflow and white-space

You can use the text-overflow property to specify how to handle text that exceeds the width of its container, and the white-space property to specify how to handle whitespace characters.

For example:

.text {
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 200px; /* adjust the width to your desired number of characters */
}

This will wrap the text to the next line after 200 characters, and add an ellipsis (...) at the end of the line.

Method 3: Using hyphens and hyphenate-limit-chars

You can use the hyphens property to enable hyphenation, and the hyphenate-limit-chars property to specify the maximum number of characters before hyphenation.

For example:

.text {
  hyphens: auto;
  hyphenate-limit-chars: 200; /* adjust the number to your desired number of characters */
}

This will wrap the text to the next line after 200 characters, and add a hyphen (-) at the breaking point.

Note that the above methods may have different effects depending on the browser and the specific use case. You may need to adjust the properties and values to achieve the desired result.