Como copiar conteudo de div para clipboard com quebras de linhas?

[diegoxlz 0]

Seguinte, vi um script no site stackoverflow

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
  document.execCommand("copy");
  $temp.remove();
alert('Agora e so colar!');
}
</script>
<div id="div1">Linha1
Linha2
Linha3</div>
<div id="div2">Caixa de texto 2</div>
<button onclick="copyToClipboard('#div1')">Copy P1</button>
<button onclick="copyToClipboard('#div2')">Copy P2</button> 

Mas quando sai o resultado fica assim Linha1Linha2Linha3, como fazer para ter quebra de linha conforme o alinhamento do conteúdo da div? Pois ja tentei com <br> e \n e também trocando tag div por tag textarea, mas não obtive resultado

 

 

[diegoxlz 0]

Galera, já encontrei a solução, baixei um script pronto do site https://zenorocha.github.io/clipboard.js/ facil de instalar, fiz assim:

<div id="perg">Pergunta:<br>Linha1<br>Linha2<br>Linha3</div>
<div id="resp">Resposta:<br>Linha1<br>Linha2<br>Linha3</div>
<button id="perg" data-clipboard-action="copy" data-clipboard-target="#perg" class="perg">Copiar Pergunta</button><br />
<button id="resp" data-clipboard-action="copy" data-clipboard-target="#resp" class="resp">Copiar Resposta</button><br />

<script src="../clipboard.min.js"></script>
<script>
var perg = new Clipboard('#perg');

perg.on('success', function(e) {
console.log(e);
});

perg.on('error', function(e) {
console.log(e);
});
var resp = new Clipboard('#resp');

resp.on('success', function(e) {
console.log(e);
});

resp.on('error', function(e) {
console.log(e);
});
</script>

Fica ai a solução pro pessoal que tem a mesma dúvida ;)