Increase the width of paragraph by adding white-space padding

Question

Increase the width of paragraph by adding white-space padding

I am attempting to control the number of characters in a paragraph to a specific limit. If the text is shorter, I want to add whitespace padding, and if it exceeds the limit, I will truncate it with an ellipsis. All containers containing paragraphs should have the same size.

Utilizing a responsive grid means my container will adjust dynamically based on the paragraph length. Although I tried integrating pre-wrap into the p element, the divs remain unresponsive. It seems like the extra whitespace is being ignored.

p
{
white-space: pre-wrap;
}

Here is a JSFiddle that demonstrates my issue: http://jsfiddle.net/RFBza/4/

html css whitespace zurb-foundation

Answer 1

Answer №1

Oh my goodness. However, if for any reason you want to replicate it exactly like that, consider inserting a series of   codes separated by spaces. For example, where there were originally five spaces, now insert      . Nevertheless, this is still not a good idea.

Answer 2

Oh my goodness. However, if for any reason you want to replicate it exactly like that, consider inserting a series of   codes separated by spaces. For example, where there were originally five spaces, now insert      . Nevertheless, this is still not a good idea.

Answer 3

Answer №2

white-space is not intended to extend divs or add padding to fill in space. Its purpose is simply to control how text wraps within the containing div. If you want the text to overflow the div, you can achieve this using white-space

http://www.w3schools.com/cssref/pr_text_white-space.asp

If you are striving for uniformity among all divs, a quick solution is to set a minimum height for the containing divs.

http://jsfiddle.net/RFBza/6/

However, keep in mind that as the wording changes dynamically, the actual height may vary (especially on responsive designs). There are various techniques available to achieve this effect, but most involve JQuery, HTML changes, or even PHP (to limit string length and display ellipsis if necessary).

You could also apply this to the p selector in your CSS, but exercise caution as it will affect every paragraph. Consider using more specific selectors for targeted styling.

p
{
   white-space:pre-wrap;
   min-height:192px
}

http://jsfiddle.net/RFBza/7/

Another approach is to use PHP to determine the character limit and display an ellipsis if exceeded. For instance, limiting to 50 characters:

echo mb_strimwidth("Your paragraph goes here", 0, 50, '...');

Answer 4

white-space is not intended to extend divs or add padding to fill in space. Its purpose is simply to control how text wraps within the containing div. If you want the text to overflow the div, you can achieve this using white-space

http://www.w3schools.com/cssref/pr_text_white-space.asp

If you are striving for uniformity among all divs, a quick solution is to set a minimum height for the containing divs.

http://jsfiddle.net/RFBza/6/

However, keep in mind that as the wording changes dynamically, the actual height may vary (especially on responsive designs). There are various techniques available to achieve this effect, but most involve JQuery, HTML changes, or even PHP (to limit string length and display ellipsis if necessary).

You could also apply this to the p selector in your CSS, but exercise caution as it will affect every paragraph. Consider using more specific selectors for targeted styling.

p
{
   white-space:pre-wrap;
   min-height:192px
}

http://jsfiddle.net/RFBza/7/

Another approach is to use PHP to determine the character limit and display an ellipsis if exceeded. For instance, limiting to 50 characters:

echo mb_strimwidth("Your paragraph goes here", 0, 50, '...');

Increase the width of paragraph by adding white-space padding

Answer №1

Answer №2

Similar questions

Using AJAX and Perl to dynamically update HTML content

Text does not wrap correctly when placed between elements with the property white-space: nowrap

Establish a table containing rows derived from an object

What is the best way to ensure a font-face is displayed consistently across different browsers?

Vertical Orientation in HTML

How can you correctly include a link to a plain text sitemap file in an HTML document?

Mysterious attributes of angular 6's <table mat-table> tag

What is the best way to adjust the width of a column to perfectly fit its contents when using IE9 compatibility mode?

Is there a way to modify the variable in order to switch the font of the heading every second using CSS and JavaScript?

Turn off the extra space inserted by DataTables

What is the method for extracting the initial H1 tag from a URL?

Toggle between fading in and out by clicking the button using a div

Is it possible to dynamically convert percentages to pixels in real-time?

- Convert text style and include bullet points: • Alter

How to conceal the bottom bar in JQuery Colorbox iframe

Differentiate various collections of shapes

When a button is clicked, I would like to direct the user to a webpage using a parameter retrieved from a separate function

Is there a way to update a PHP include file without needing to refresh the page?

What is the method for aligning a glyph vertically?

This issue with ng-include not functioning properly in Chrome but working fine in Firefox