JSFiddle - React, Tailwind, and code Playground
HTML
<div id="contenedor">
<form id="formulario">
<textarea type="text" rows="20" name="texto"></textarea>
</form>
</div>
CSS
*{
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
}
.cerrar {
background-color:#900;
color:#FFF;
}
#contenedor{
height:400px;
width:400px;
background-color:#069;
margin:0 auto;
padding-left:30px;
padding-top:30px;
}
#formulario{
width:350px;
display:block;
padding:2px;
position:relative;
}
#formulario textarea{
border:none;
width:100%;
position:absolute;
left:0;
top:0;
z-index:1;
padding-top:0px;
overflow:hidden;
height:50px;
}
#formulario p{
display:block;
width:auto;
padding-left:4px;
margin-right:4px;
float:left;
position:relative;
background-color:#CCC;
z-index:200;
}
JavaScript
$(function(){
$("#formulario textarea").keyup(function(event){
if (event.keyCode == '32') {
var cuenta = this.value.split(" ");
if (cuenta[0] != ""){
$(this).parent().append("<p>"+cuenta[0]+"<a class='cerrar' href='#' onClick='rape(this); return false'>X</a></p>");
cuenta.shift();
this.value = cuenta.join(" ");
$(this).each(actualizar_espacios)
}
}
});
})
function rape(a){
var textarea = $(a).parent().parent().find("textarea")
$(a).parent().remove();
textarea.each(actualizar_espacios).focus()
}
function actualizar_espacios(){
$(".ultima_fila").removeClass("ultima_fila")
var este = $(this).parent().find("p:last");
este.addClass("ultima_fila")
var anterior = este.prev()
while(anterior.offset().top == este.offset().top){
anterior.addClass("ultima_fila")
este = anterior;
anterior = este.prev()
}
$(this).css("text-indent",function(index, value){
var total = 0;
var padding = 0;
$(this).parent().find(".ultima_fila").each(function(){
total += $(this).outerWidth(true);
if(total > $(this).parent().width()){
total = 0; // $("textarea").val(function(index, value){return value + "\n"}).focus();
}
})
return total + "px";
})
var offset = $(".ultima_fila:last").offset().top - $(this).offset().top;
$(this).css("padding-top",offset)
}