Elementor Demo Site

Author box whitespace

HTML whitespace messes up styling of Author Box, and possibly other widgets.

The widgets below are the Elementor Pro Author Box. It fetches and outputs info from the WordPress user, including the “Biographical Info”. By default, the bio is a standard textarea and therefore any linebreaks you may type in is not automatically translated to <br>. Everything in the bio is normally rendered on the same line which can look really cluttered and ugly.

You can try and get around this by adding some custom CSS, such as white-space: pre-line, to the widget, but since the widget outputs extraneous HTML whitespace this workaround affects the styling in a negative way. 

Picture of Tomas Eklund

Tomas Eklund

This is the first line of my bio. And this is a new line.

This Author Box has no custom CSS. The bio is outputted on one long line, which is not what we want.

Picture of Tomas Eklund

Tomas Eklund

This is the first line of my bio. And this is a new line.

The Author Box above has the custom CSS:

				
					selector .elementor-author-box__bio {
    white-space: pre-line;
}

The result is that the bio is broken up on two lines, but there is also an unwanted linebreak between the name and the bio which comes from the Elementor widget template. 

Cause of problem

The problem is caused by a lot of unnecessary whitespace in the render() method of the widget. 
				
									<?php if ( $print_bio ) : ?>
					<div class="elementor-author-box__bio">
						<?php echo $author['bio']; ?>
					</div>
				<?php endif; ?>

Solution

One possible, and really simple, solution is to get rid of the whitespace in the template.

				
									<?php if ( $print_bio ) : ?>
					<div class="elementor-author-box__bio"><?php echo $author['bio']; ?></div>
				<?php endif; ?>

Another, slightly more complex, solution is to add a new switch control to the widget which preserves linebreaks in the bio by filtering it through the nl2br() function.

This is the footer