Continuer le texte dans des paragraphes <p> séparés de façon dynamique ?

Question

Les éléments suivants violon permet de coller du texte dans un <textarea> et généré dynamiquement en paragraphes égaux <p> composés du même nombre de caractères.

---

Le problème qui se pose est le suivant : le texte des paragraphes précédents générés dynamiquement <p> déborde à l'intérieur de chaque balise et ne passe pas correctement au paragraphe dynamique suivant. Par conséquent, est-il possible pour l'utilisateur d'appuyer sur la touche Entrée et de déplacer ce contenu vers le bas dans le prochain paragraphe existant, tout en conservant le formatage existant de manière dynamique et automatique ?

Si un nouveau Violon Si vous pouviez me fournir des informations, je vous en serais très reconnaissant, car je suis encore novice en matière de codage. Encore une fois, le Fiddle peut être trouvé aquí .

Mise à jour : Est-il possible, une fois que les paragraphes sont générés, que l'utilisateur appuie sur la touche "Entrée" et, si possible, déplace son contenu vers le paragraphe inférieur de façon transparente ? Et qu'il en soit de même lorsque l'utilisateur appuie sur la touche d'effacement, pour que le contenu remonte dans le paragraphe supérieur ? Le problème qui se pose est que le texte, lorsqu'on appuie sur la touche Entrée, semble cacher le texte en raison de la propriété overflow en css.

---

$(function() {
    $("#Go").on('click', function() {
        var theText = $('textarea').val();
        var numberOfCharacters = 300;
        while (theText.length) {
            while (theText.length > numberOfCharacters &&
                theText.charAt(numberOfCharacters) !== ' ') {
                numberOfCharacters++;
            }
            $("#text_land").append("<br><\/br><p>" + theText.substring(
                    0, numberOfCharacters) +
                "<\/p><br><\/br>");
            theText = theText.substring(numberOfCharacters);
            numberOfCharacters = 300;
            $('p').attr('contenteditable', 'true');
            $("p").addClass("text");
        }
    })
})
$('select').on('change', function() {
    var targets = $('#text_land p'),
        property = this.dataset.property;
    targets.css(property, this.value);
}).prop('selectedIndex', 0);
(end);

@media print {
    p {
        page-break-inside: avoid;
    }
}

p {
    position: relative;
}

@media print {
    .no-print,.no-print * {
        display: none !important;
    }
}

p {
    border-style: solid;
    color: #000;
    display: block;
    text-align: justify;
    border-width: 5px;
    font-size: 19px;
    overflow: hidden;
    height: 300px;
    width: 460px;
    word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div align="center">
        <h4 align="center"><u>Paste text in the field below to divide text into
        paragraphs.</u></h4><br>
        <br>
        <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10">
</textarea><br>
        <br>
        <button id="Go">Divide Text into Paragraphs!</button>
    </div>
    <hr>
    <h2 align="center">Divided Text Will Appear Below:</h2>
    <div>
        <div align="center" id="text_land" style="font-family: monospace">
        </div>
    </div>

Answer 1

possible pour l'utilisateur d'appuyer sur la touche Entrée et le prochain paragraphe existant, tout en le formatage existant de manière dynamique et automatique

Si je comprends bien, ce que vous voulez, c'est qu'une fois que le texte est divisé en paragraphes, l'utilisateur ajoute du texte dans l'un d'eux et appuie sur Enter Le reste du texte doit alors s'écouler dans les paragraphes suivants en répartissant le texte qui déborde de manière égale, comme cela a été fait précédemment.

De même, lorsque l'utilisateur appuie sur BackSpace au début du paragraphe, puis le texte retourne à nouveau dans le paragraphe précédent, le texte débordant étant réparti dans les autres paragraphes de la même manière que précédemment.

En tant qu'algorithme, ce dont vous avez besoin est quelque chose comme ceci :

1. Divisez le texte initial en morceaux égaux et répartissez-les dans des paragraphes en créant ceux qui sont les plus appropriés. p de manière dynamique, selon les besoins.
2. Ecoutez keyup sur ces p éléments
3. Si la touche pressée est Enter ,
   • 3.1 Extraire le texte restant de l'endroit où Enter a été pressé
   • 3.2 Extraire le texte de tous les paragraphes suivants, le faire précéder du texte débordant extrait ci-dessus.
   • 3.3 Supprimez ensuite tous les paragraphes et distribuez le texte combiné comme nous l'avons fait à l'étape 1.
4. Si la touche pressée est BackSpace ,
   • 4.1 Vérifier si elle se trouve au début du paragraphe et s'il y a un paragraphe précédent.
   • 4.2 Extraire le texte du paragraphe et l'ajouter au texte de tous les paragraphes suivants
   • 4.3 Supprimer ensuite tous les paragraphes, y compris le paragraphe actuel, et ajouter le texte extrait au paragraphe précédent.
   • 4.4 Distribuez le texte combiné comme nous l'avons fait à l'étape 1.

Avec cet algorithme approximatif, vous pouvez commencer à coder, ce qui pourrait ressembler à quelque chose comme ceci :

Note 1 : C'est tout JavaScript, pas de jQuery.
Note 2 : C'est trop simplifié, vous devrez optimiser davantage et résoudre tous les cas limites.

Mettez en cache les éléments requis et liez les gestionnaires d'événements :

var btn = document.getElementById('go'), 
    textarea = document.getElementById('textarea1'), 
    content = document.getElementById('content');

btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);

Distribuez le texte initial de la textarea supprimer les paragraphes existants, le cas échéant :

function initialDistribute() {
    var text = textarea.value;
    while (content.hasChildNodes()) { content.removeChild(content.lastChild); }
    rearrange(text);
}

Logique pour réorganiser / distribuer le texte en créant dynamiquement le nombre requis de paragraphes :

function rearrange(text) {
    var chunks = text.match(/.{1,100}/g) || [];
    chunks.forEach(function(str, idx) {
        para = document.createElement('P');
        para.setAttribute('contenteditable', true);
        para.textContent = str;
        content.appendChild(para);
    });
}

Note 3 : J'ai utilisé 100 caractères pour diviser le texte pour cet exemple. De plus, cette méthode ne tient pas compte des espaces et divisera les mots entre eux. Vous devrez le faire dans votre code. (# voir modification ci-dessous)

Gestionnaire d'événements pour piéger Enter ( code clé 13 ) et BackSpace ( code clé 8 ). Vérifiez également si l'élément est un p élément :

function handleKey(e) {
    var para = e.target, position, 
        key, fragment, overflow, remainingText;
    key = e.which || e.keyCode || 0;
    if (para.tagName != 'P') { return; }
    if (key != 13 && key != 8) { return; }
    ...

Obtenir la position du curseur pour déterminer si BackSpace a été appuyé au début du paragraphe ou non :

position = window.getSelection().getRangeAt(0).startOffset;    

Si Enter a été pressé, extraire le texte après le dernier enfant du paragraphe actuel ( contenteditable produira un div quand Enter est pressé ), supprimez ce noeud, ajoutez le texte restant de tous les paragraphes qui viennent après celui-ci, et supprimez les paragraphes restants.

if (key == 13) {
    fragment = para.lastChild; overflow = fragment.textContent;
    fragment.parentNode.removeChild(fragment); 
    remainingText = overflow + removeSiblings(para, false);
    rearrange(remainingText);
}

Si BackSpace a été appuyé, vérifiez s'il existe un paragraphe précédent et si le curseur se trouvait au début. Si oui, extraire le texte restant de tous les paragraphes suivants (y compris le paragraphe actuel) tout en les supprimant :

if (key == 8 && para.previousElementSibling && position == 0) {
    fragment = para.previousElementSibling;
    remainingText = removeSiblings(fragment, true);
    rearrange(remainingText);
}

Logique d'extraire le texte des paragraphes successifs et de les supprimer :

function removeSiblings(elem, includeCurrent) {
    var text = '', next;
    if (includeCurrent && !elem.previousElementSibling) { 
        parent = elem.parentNode; text = parent.textContent;
        while (parent.hasChildNodes()) { parent.removeChild(parent.lastChild); }
    } else {
        elem = includeCurrent ? elem.previousElementSibling : elem;
        while (next = elem.nextSibling) { 
            text += next.textContent; elem.parentNode.removeChild(next);
        }
    }
    return text;
}

---

En mettant tout cela ensemble, voici un extrait de travail :

Snippet :

var btn = document.getElementById('go'), 
    textarea = document.getElementById('textarea1'), 
    content = document.getElementById('content'), 
    chunkSize = 100;

btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);

function initialDistribute() {
    var text = textarea.value;
    while (content.hasChildNodes()) {
        content.removeChild(content.lastChild);
    }
    rearrange(text);
}

function rearrange(text) {
    var chunks = splitText(text, false);
    chunks.forEach(function(str, idx) {
        para = document.createElement('P');
        para.setAttribute('contenteditable', true);
        para.textContent = str;
        content.appendChild(para);
    });
}

function handleKey(e) {
    var para = e.target, position, 
        key, fragment, overflow, remainingText;
    key = e.which || e.keyCode || 0;
    if (para.tagName != 'P') { return; }
    if (key != 13 && key != 8) { return; }
        position = window.getSelection().getRangeAt(0).startOffset;    
    if (key == 13) {
        fragment = para.lastChild;
        overflow = fragment.textContent;
        fragment.parentNode.removeChild(fragment); 
        remainingText = overflow + removeSiblings(para, false);
        rearrange(remainingText);
    }
    if (key == 8 && para.previousElementSibling && position == 0) {
        fragment = para.previousElementSibling;
        remainingText = removeSiblings(fragment, true);
        rearrange(remainingText);
    }
}

function removeSiblings(elem, includeCurrent) {
    var text = '', next;
    if (includeCurrent && !elem.previousElementSibling) { 
        parent = elem.parentNode; 
        text = parent.textContent;
        while (parent.hasChildNodes()) {
            parent.removeChild(parent.lastChild);
        }
    } else {
        elem = includeCurrent ? elem.previousElementSibling : elem;
        while (next = elem.nextSibling) { 
            text += next.textContent;
            elem.parentNode.removeChild(next);
        }
    }
    return text;
}

function splitText(text, useRegex) {
    var chunks = [], i, textSize, boundary = 0;
    if (useRegex) { 
        var regex = new RegExp('.{1,' + chunkSize + '}\\b', 'g');
        chunks = text.match(regex) || [];
    } else {
        for (i = 0, textSize = text.length; i < textSize; i = boundary) {
            boundary = i + chunkSize;
            if (boundary <= textSize && text.charAt(boundary) == ' ') {
                chunks.push(text.substring(i, boundary));
            } else {
                while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; }
                chunks.push(text.substring(i, boundary));
            }
        }
    }
    return chunks;
}

* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: monospace; font-size: 1em; }
h3 { margin: 1.2em 0; }
div { margin: 1.2em; }
textarea { width: 100%; }
button { padding: 0.5em; }
p { padding: 1.2em 0.5em; margin: 1.4em 0; border: 1px dashed #aaa; }

<div>
  <h3>Paste text in the field below to divide text into
        paragraphs..</h3>
  <textarea placeholder="Type text here, then press the button below." id="textarea1" rows="5" ></textarea><br/><br/>
  <button id="go">Divide Text into Paragraphs</button>
</div>
<hr>
<div>
  <h3>Divided Text Will Appear Below:</h3>
  <div id="content"></div>
</div>

Et un violon pour que vous puissiez jouer avec :

Violon : https://jsfiddle.net/abhitalks/jwnnn5oy/

---

Edit 1 :

Correction de la regex pour la rupture aux limites des mots. J'ai également ajouté le code procédural non-regex pour la même chose ( sur les lignes du code original d'Op ), pour démontrer à l'Op comment factoriser et intégrer ses autres segments de code dans celui-ci.

Note 4 : En ce qui concerne le commentaire d'Op sur l'utilisation de jQuery, cela n'a rien à voir avec le problème en question. jQuery n'est rien d'autre que du JavaScript et il devrait être trivial pour eux d'incorporer des morceaux de snippet dans la base de code plus large.

Changez le jeu : Fonction ajoutée splitText .

---

Edit 2 :

Selon votre commentaire, si vous voulez que la redistribution se fasse automatiquement lorsque l'utilisateur tape... alors vous devrez calculer la longueur du texte dans ce paragraphe et voir si elle dépasse la taille de vos morceaux. Si c'est le cas, effectuez la redistribution à partir de ce paragraphe. Faites l'inverse pour le retour arrière.

J'ai initialement posté la solution pour votre exigence de faire cela lorsque l'utilisateur appuie sur la touche Entrée entre n'importe quel texte pour le rompre et le distribuer aux paragraphes suivants. Je ne recommande pas de le faire automatiquement au fur et à mesure que l'utilisateur tape, car les changements seraient trop brutaux pour l'utilisateur.

Extrait 2 :

var btn = document.getElementById('go'), 
    textarea = document.getElementById('textarea1'), 
    content = document.getElementById('content'), 
    chunkSize = 100;

btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);

function initialDistribute() {
    var text = textarea.value;
    while (content.hasChildNodes()) {
        content.removeChild(content.lastChild);
    }
    rearrange(text);
}

function rearrange(text) {
    var chunks = splitText(text, false);
    chunks.forEach(function(str, idx) {
        para = document.createElement('P');
        para.setAttribute('contenteditable', true);
        para.textContent = str;
        content.appendChild(para);
    });
}

function handleKey(e) {
    var para = e.target, position, 
        key, fragment, overflow, remainingText;
    key = e.which || e.keyCode || 0;
    if (para.tagName != 'P') { return; }
    if (key != 13 && key != 8) { redistributeAuto(para); return; }
        position = window.getSelection().getRangeAt(0).startOffset;    
    if (key == 13) {
        fragment = para.lastChild;
        overflow = fragment.textContent;
        fragment.parentNode.removeChild(fragment); 
        remainingText = overflow + removeSiblings(para, false);
        rearrange(remainingText);
    }
    if (key == 8 && para.previousElementSibling && position == 0) {
        fragment = para.previousElementSibling;
        remainingText = removeSiblings(fragment, true);
        rearrange(remainingText);
    }
}

function redistributeAuto(para) {
    var text = para.textContent, fullText;
    if (text.length > chunkSize) {
        fullText = removeSiblings(para, true);
    }
    rearrange(fullText);
}

function removeSiblings(elem, includeCurrent) {
    var text = '', next;
    if (includeCurrent && !elem.previousElementSibling) { 
        parent = elem.parentNode; 
        text = parent.textContent;
        while (parent.hasChildNodes()) {
            parent.removeChild(parent.lastChild);
        }
    } else {
        elem = includeCurrent ? elem.previousElementSibling : elem;
        while (next = elem.nextSibling) { 
            text += next.textContent;
            elem.parentNode.removeChild(next);
        }
    }
    return text;
}

function splitText(text, useRegex) {
    var chunks = [], i, textSize, boundary = 0;
    if (useRegex) { 
        var regex = new RegExp('.{1,' + chunkSize + '}\\b', 'g');
        chunks = text.match(regex) || [];
    } else {
        for (i = 0, textSize = text.length; i < textSize; i = boundary) {
            boundary = i + chunkSize;
            if (boundary <= textSize && text.charAt(boundary) == ' ') {
                chunks.push(text.substring(i, boundary));
            } else {
                while (boundary <= textSize && text.charAt(boundary) != ' ') { boundary++; }
                chunks.push(text.substring(i, boundary));
            }
        }
    }
    return chunks;
}

* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: monospace; font-size: 1em; }
h3 { margin: 1.2em 0; }
div { margin: 1.2em; }
textarea { width: 100%; }
button { padding: 0.5em; }
p { padding: 1.2em 0.5em; margin: 1.4em 0; border: 1px dashed #aaa; }

<div>
  <h3>Paste text in the field below to divide text into
        paragraphs..</h3>
  <textarea placeholder="Type text here, then press the button below." id="textarea1" rows="5" ></textarea><br/><br/>
  <button id="go">Divide Text into Paragraphs</button>
</div>
<hr>
<div>
  <h3>Divided Text Will Appear Below:</h3>
  <div id="content"></div>
</div>

Violon 2 : https://jsfiddle.net/abhitalks/hvhr4ds8/

Note 5 : Dans le violon, appuyez d'abord sur la touche Entrée pour interrompre le texte afin que vous puissiez voir comment la redistribution se produit lorsque vous tapez. Notez également qu'en raison de la logique de ne pas casser un mot, il faudra quelques caractères supplémentaires avant que la redistribution ne s'effectue.

Changez le jeu : Fonction ajoutée redistributeAuto .

Answer 2

Très simple, si je vous comprends bien.

$(function() {
    $("#Go").on('click', function() {
        var theText = $('textarea').val();
        var paragraphs = theText.split('\n\n');
        $("#text_land").html('');
        paragraphs.forEach(function(paragraph) {
          var lines = paragraph.split('\n');
          $('<p class="text" contenteditable />').html(lines.join('<br>')).appendTo("#text_land");
        });
    })
})
$('select').on('change', function() {
    var targets = $('#text_land p'),
        property = this.dataset.property;
    targets.css(property, this.value);
}).prop('selectedIndex', 0);
(end);

@media print {
    p {
        page-break-inside: avoid;
    }
}

p {
    position: relative;
}

@media print {
    .no-print,.no-print * {
        display: none !important;
    }
}

p {
    border-style: solid;
    color: #000;
    display: block;
    text-align: justify;
    border-width: 5px;
    font-size: 19px;
    overflow: hidden;
    height: 300px;
    width: 460px;
    word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div align="center">
        <h4 align="center"><u>Paste text in the field below to divide text into
        paragraphs.</u></h4><br>
        <br>
        <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10">
</textarea><br>
        <br>
        <button id="Go">Divide Text into Paragraphs!</button>
    </div>
    <hr>
    <h2 align="center">Divided Text Will Appear Below:</h2>
    <div>
        <div align="center" id="text_land" style="font-family: monospace">
        </div>
    </div>

Answer 3

D3 est en fait assez bien adapté à cela. Si je vous comprends bien, l'ajout et la suppression de <p> Les éléments doivent apparaître et disparaître naturellement lors du montage.

C'est un peu grossier, mais dans l'exemple ci-dessous, un nouveau paragraphe est "détecté" après l'insertion de deux nouvelles lignes. Le site <textarea> valeur est .split() par rapport à ce critère et appliqué à la <div> sur la droite car c'est data() réseau. Donc, pour chaque élément des données, nous entrons/sortons/mettons à jour <p> éléments. Nous obtenons des ajouts et des suppressions faciles et agréables au fur et à mesure que nous modifions le texte, sans que le DOM ne soit bousculé.

En retravaillant un peu, vous pourriez probablement fusionner les éléments suivants <textarea> et le <p> en une sorte d'éditeur 'wysiwyg'...

var text = '';
var break_char = '\n\n';
var editor = d3.select('.editor');
var output = d3.select('.output');

function input_handler () {

  text = editor.node().value;

  var paragraphs = output.selectAll('.paragraph')
    .data(text.split(break_char));

  paragraphs.enter()
    .append('p')
    .attr('class', 'paragraph')
    .style('opacity', 0);

  paragraphs.exit().remove();

  paragraphs
    .text(function (d) { return d })
    .transition()
    .duration(300)
    .style('opacity', 1);
}

editor.on('input', input_handler);

body {
  vertical-align: top;
  height: 100%;
  background-color: #eee;
}
body * {
  box-sizing: border-box;
  font-family: arial;
  font-size: 0.8rem;
  margin: 0.5rem;
  padding: 0.5rem;
}
.input,
.output {
  display: inline-block;
  position: absolute;
  top: 0;
  height: auto;
}
.input {
  left: 0;
  right: 50%;
}
.output {
  left: 50%;
  right: 0;
}
.editor {
  display: inline-block;
  border: 0;
  width: 100%;
  min-height: 10rem;
  height: 100%;
}
.paragraph {
  background-color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div>
  <div class='input'>
    <textarea class='editor' placeholder='write away...'></textarea>
  </div>
  <div class='output'></div>
</div>

Answer 4

S'il vous plaît, vérifiez le violon . J'ai ajouté du code pour écouter <p> et effectuez la manipulation de texte requise.

$(function() {
  $("#Go").on('click', function() {
    var $p, a = [];
    var theText = $('textarea').val();
    var numberOfCharacters = 300;
    while (theText.length) {
      while (theText.length > numberOfCharacters &&
        theText.charAt(numberOfCharacters) !== ' ') {
        numberOfCharacters++;
      }

      $p = $("<p contenteditable class='text'>" + theText.substring(0, numberOfCharacters) + "<\/p>")
        .on('keydown', function(e) {
          var p = this;
          setTimeout(function() {
            if (e.which === 13) {
              var i;
              var k = $(p).html().split('<br>');
              if ((i = a.indexOf(p)) > -1 && a[i + 1])
                $(a[i + 1]).html(k.pop() + ' ' + $(a[i + 1]).html());

              $(p).html(k.join('<br>'));
            }
          });
        });

      a.push($p.get(0));

      $("#text_land").append("<br><\/br>", $p, "<br><\/br>");

      theText = theText.substring(numberOfCharacters);
      numberOfCharacters = 300;
    }
  })
})
$('select').on('change', function() {
  var targets = $('#text_land p'),
    property = this.dataset.property;
  targets.css(property, this.value);
}).prop('selectedIndex', 0);
//(end);

@media print {
  p {
    page-break-inside: avoid;
  }
}
p {
  position: relative;
}
@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}
p {
  border-style: solid;
}
p {
  color: #000;
}
p {
  display: block;
  text-align: justify;
  border-width: 5px;
  font-size: 19px;
}
p {
  overflow: hidden;
  height: 300px;
  width: 460px;
  word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div align="center">
  <h4 align="center"><u>Paste text in the field below to divide text into
        paragraphs.</u></h4>
  <br>
  <br>
  <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10">
  </textarea>
  <br>
  <br>
  <button id="Go">Divide Text into Paragraphs!</button>
</div>
<hr>
<h2 align="center">Divided Text Will Appear Below:</h2>
<div>
  <div align="center" id="text_land" style="font-family: monospace">
  </div>
</div>

Answer 5

Pouvez-vous vérifier ceci Violon . Je ne suis pas sûr que ce soit ce que vous vouliez. J'ajoute simplement un événement sur le paragraphe éditable pour contrôler la sortie désirée.

$(function() {
  $("#Go").on('click', function() {
    var theText = $('textarea').val();
    var numberOfCharacters = 300;
    while (theText.length) {
      while (theText.length > numberOfCharacters &&
        theText.charAt(numberOfCharacters) !== ' ') {
        numberOfCharacters++;
      }
      $("#text_land").append("<br><\/br><p>" + theText.substring(
          0, numberOfCharacters) +
        "<\/p><br><\/br>");
      theText = theText.substring(numberOfCharacters);
      numberOfCharacters = 300;
      $('p').attr('contenteditable', 'true');
      $("p").addClass("text");
    }
  })
});
$(document).on('keyup', 'p.text', function(e) {
  if (e.keyCode == 13) {
    var extend = $(this).find("div").html();
    $(this).next().next().next().next().next().prepend(extend).focus();
    $(this).find("div").remove();
  }
});
$('select').on('blur keyup paste', function() {
  var targets = $('#text_land p'),
    property = this.dataset.property;
  targets.css(property, this.value);
}).prop('selectedIndex', 0);
(end);

@media print {
  p {
    page-break-inside: avoid;
  }
}
p {
  position: relative;
}
@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}
p {
  border-style: solid;
}
p {
  color: #000;
}
p {
  display: block;
  text-align: justify;
  border-width: 5px;
  font-size: 19px;
}
p {
  overflow: hidden;
  height: 300px;
  width: 460px;
  word-wrap: break-word;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<div align="center">
  <h4 align="center"><u>Paste text in the field below to divide text into
        paragraphs.</u></h4>
  <br>
  <br>
  <textarea placeholder="Type text here, then press the button below." cols="50" id="textarea1" rows="10"></textarea>
  <br>
  <br>
  <button id="Go">Divide Text into Paragraphs!</button>
</div>
<hr>
<h2 align="center">Divided Text Will Appear Below:</h2>
<div>
  <div align="center" id="text_land" style="font-family: monospace">
  </div>
</div>