removing spaces in <pre> tag - html

问题

Hi I am using pre tag to dispaly some text files, but the problem is at the beginning and the end, 2-3 new lines are being printed. How do I remove that? I am getting the text file through http request and I cannot modify the text file, I have to display as is.

Or is there a better way to display text files in html?

回答1:

I faced a similar problem in the past..... I think this could be a problem, can't tell for sure unless you share the code (I faced the problem in my AngularJS app, so the variable binding, etc. in the code below is based on that)

suppose you have to display the data in the variable textFile.data (I stored the data in textFile.data variable)

<pre ng-show = "textFile.isPresent">
    <span>
        {{textFile.data}}
    </span>
</pre>

There are two new-line chars added when the html was displayed because whatever is there between pre tag is exactly shown. So 2 lines were added because of the new line in the html after "pre" tag and after "span" tag.

I changed it to this

<pre ng-show = "textFile.isPresent"><span>{{textFile.data}}</span></pre>

The extra lines were removed after doing this. Note that you can also remove them by modifying the css file. If you don't know how, comment, i'll help you out.

This is just one of the reasons, have to see your code, to tell what is exactly wrong

回答2:

You could try using str_replace, I'm not sure if it's just spaces you need to replace, or line breaks so I will give you a couple of examples...

str_replace(' ', '', $name);

This will remove all spaces which may become an issue if you have places where a space is meant to be.

If there are multiple spaces at the end of the line and nowhere else then you could try...

str_replace('  ', '', $name);

Anything with two spaces in a row will be removed.

If you are on Linux, and they are line breaks, you could try...

str_replace('\n', '', $name);

This will remove any line ending within Linux, for windows, you could do...

str_replace('\r', '', $name);

Or for both systems try...

str_replace('\r\n', '', $name);

Again, this may be difficult if you have line endings which are supposed to be there, so if there is more than one line ending at the end, you could try...

str_replace('\r\n\r\n', '', $name);

Which may work. Just thought I would give you all use cases and hopefully this helps you out.

回答3:

At first I thought you could try splitting by new lines. Like this.

<?php
    $lines = explode("\n", $html_string);
    for ($i = 0; $i < count($lines); $i++) {
        $line = trim($lines[$i]);
        $lines[$i] = $line;
    }
    $html_string = join("", $lines);
?>

But I have a feeling this might not be sufficient. There could be cases where there are more than one space characters in between words.

An alternative is to recursively explode a string by two spaces and joining it together again without a delimiter. Keep doing this until the result of explode contains just one value.

Edit: Added an untested POC below.

recursiveTrim($str) {
    $lines = explode($str, "  "); // Split by 2 spaces, not one
    if (count($lines) == 1)
    {
        return $str;
    }

    for ($i = 0; $i < count($lines); $i++) {
        $lines[$i] = trim($lines[$i]);
    }
    $str = implode("", $lines);
    recursiveTrim($str)
}

回答4:

<pre> tag designed specially for displaying pre-formatted text.

The <pre> tag defines preformatted text.

Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

http://www.w3schools.com/tags/tag_pre.asp

You could trim() your string by PHP on server-side.

trim — Strip whitespace (or other characters) from the beginning and end of a string

http://php.net/trim

PHP

<?php
  $str = trim($str);
  echo "<pre>$str</pre>";
?>

UPD

If you have no access to server-side, just do it on client-side by JavaScript .trim() method.

$('<pre>' + str.trim() + '</pre>');

回答5:

first trim the spaces from left and right of text and then you can output trimmed value in pre.

来源：https://stackoverflow.com/questions/31315150/removing-spaces-in-pre-tag-html