Jump to content

Maintaining spaces and tabs in a block of text


Robert Moskowitz
 Share

Recommended Posts

I have a howto that includes blocks of text that must or at least should be copied exactly to the clipboard, maintaining multiple spaces and tabs.

Currently I have things like:

 

<div id="box12" style="border:1px solid black ;padding-top:0em;padding-bottom:1em;
margin-left:3em;width:28em;height:10em;overflow-y:hidden;overflow-x:auto;">
<pre><span class="inner-pre" style="font-size: 16px">
bind 'set disable-completion on'
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'
</span></pre>
</div>

 

Is there a better way to do this?  When I use my new copy to clipboard java script, I get 2 blank lines in front and one at the end (at least with Firefox).

 

Link to comment
Share on other sites

All whitespace inside the <pre> tag is rendered, including the line break at the beginning and end of the tag. If you want to remove those line breaks then you will have to put the code on the same line as the tag:

<pre><span class="inner-pre" style="font-size: 16px">bind 'set disable-completion on'
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'</span></pre>

 

Link to comment
Share on other sites

Did a bunch of trying until I got just the lines in the block into the clipboard.  I got rid of the div and span tags and put everything into the pre tag.  The following little body works with one caveat that the button does not rest immediately below the boarder of the box (about a 1/2 line gap):

<body>

text
<br><br>
<pre id="box11" style="border:1px solid black;margin-left:3em;padding-top:1em;
width:25em;height:9em;overflow-y:hidden;overflow-x:auto;font-size: 16px">
bind 'set disable-completion on'
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'
</pre>
<button style="margin-left:4em" onclick="copyClipboard('box11')">Copy text</button>
<br><br>
text

<script>
function copyClipboard(x) {
  var elm = document.getElementById(x);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
//   alert("Copied div content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
//    alert("Copied div content to clipboard");
  }
}
</script>
	
</body>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...