如何将这些标签放在div边框内？

Question

var val_tujuan = "test"; 
 
$('#d_tujuan').on('click', function(){ 
 
\t \t \t var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>"; 
 
\t \t \t 
 
\t \t \t $('#d_tujuan').append(txt_tujuan); 
 
     });

.lbl_txt{ 
 
background-color:green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
        <div id='fdaftar' class="form-group"> 
 
         <label>Daftar Tujuan</label> 
 
         <div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px; word-wrap: break-word;"> 
 
         </div> 
 
\t \t \t \t \t </div> 
 
        </div>

我有一个脚本，标签，一个div添加。但是，问题是标签是否通过了div边框？如何解决它？我已经尝试了解决方案here，但没有为我工作。 （也许我无法落实解决那里）

我的jQuery：

$('#sel_tujuan').on('change', function(){ 
     var val_tujuan = $(this).val(); 
     var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>"; 

     $('#d_tujuan').append(txt_tujuan);   
}); 

我的事业部：

<div class="col-md-12"> 
<div id='fdaftar' class="form-group"> 
    <label>Daftar Tujuan</label> 
    <div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px;word-wrap: break-word"></div> 
</div> 
</div> 

Answer 1

请检查并给这个css word-wrap: break-word;至d_tujuan ID。添加此标签的CSS。

.label.lbl_txt { 
display: inline-block; 
} 

var val_tujuan = "test"; 
 
$('#d_tujuan').on('click', function(){ 
 
    var txt_tujuan = "<label class='label label-primary lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>"; 
 

 
    $('#d_tujuan').append(txt_tujuan); 
 
});

.lbl_txt{ 
 
background-color:green; 
 
} 
 
.label.lbl_txt { 
 
    display: inline-block; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
    <div id='fdaftar' class="form-group"> 
 
     <label>Daftar Tujuan</label> 
 
     <div id='d_tujuan' style="border:#000 1px; background-color:#DDD; min-height:100px; display:block; word-wrap: break-word;"> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

是它不是以这种方式$('#sel_tujuan').on('change', function()因为当时引发的问题不这样的元素与ID＃sej_tujuan所以我只是把检查它的工作点击div.Click div的工作。也没有这样的价值在div你试图得到div的价值。如果你想获得DIV的文本只是使用$('div selected').text();

$('#sel_tujuan').on('change', function(){ 
     var val_tujuan = $(this).val(); 

像这样没有从输入先手值，选项据我所知，也许你可以得到DIV的值可能，但这种方式。

如果你想获得DIV的文本只是使用$('div selected').text();

$(document).ready(function(){ 
 
$('#d_tujuan').click(function(){ 
 
     var val_tujuan = $('input').val(); 
 
     var txt_tujuan = "<label class='lbl_txt' style='margin:1px;'>"+val_tujuan+"</label>"; 
 
     $('#d_tujuan').append(txt_tujuan);   
 
}); 
 
});

#d_tujuan { 
 
    border:#000 1px; 
 
    background-color:#DDD; 
 
    min-height:100px; 
 
    display:block; 
 
    word-wrap: break-word; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12"> 
 
<div id='fdaftar' class="form-group"> 
 
    <label>Daftar Tujuan</label> 
 
    <div id='d_tujuan'></div> 
 
</div> 
 
</div> 
 
<input value='valued'>

更新

在你的DIV + CSS word-wrap: break-word;将使格放不下你的文本在DIV