Is there a way to display the full text inside the <td> element? You can test it here:
$(document).ready(function(){
var users = [],
shuffled = [],
loadout = $("#loadout"),
insert_times = 30,
duration_time = 10000;
$("#roll").click(function(){
users = [];
//var lines = $('textarea').val().split('\n');
var lines = "Excepteur sint occaecat cupidatat non proident \n adipiscing elit, sed do eiusmod tempor incididunt".split('\n')
if(lines.length < 2){
$("#msgbox").slideToggle(100);
setTimeout(function() {
$("#msgbox").slideToggle(100);
}, 3000);
return false;
}
for(var i = 0;i < lines.length;i++){
if(lines[i].length > 0){
users.push(lines[i]);
}
}
$("#roll").attr("disabled",true);
var scrollsize = 0,
diff = 0;
$(loadout).html("");
$("#log").html("");
loadout.css("left","100%");
if(users.length < 10){
insert_times = 20;
duration_time = 5000;
}else{
insert_times = 10;
duration_time = 10000;
}
for(var times = 0; times < insert_times;times++){
shuffled = users;
shuffled.shuffle();
for(var i = 0;i < users.length;i++){
loadout.append('<td><div class="roller"><div>'+shuffled[i]+'</div></div></td>');
scrollsize = scrollsize + 192;
}
}
diff = Math.round(scrollsize /2);
diff = randomEx(diff - 300,diff + 300);
$( "#loadout" ).animate({
left: "-="+diff
}, duration_time, function() {
$("#roll").attr("disabled",false);
$('#loadout').children('td').each(function () {
var center = window.innerWidth / 2;
if($(this).offset().left < center && $(this).offset().left + 185 > center){
var text = $(this).children().text();
$("#log").append("THE WINNER IS<br/> <span class=\"badge\">"+text+"</span>");
}
});
});
});
Array.prototype.shuffle = function(){
var counter = this.length, temp, index;
while (counter > 0) {
index = (Math.random() * counter--) | 0;
temp = this[counter];
this[counter] = this[index];
this[index] = temp;
}
}
function randomEx(min,max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
});.topbox{
background:white;
padding-bottom:40px;
}
.rollbox{
width:100%;
height:200px;
background:white;
border:1px solid #eb3b5a;
border-radius: 5px;
overflow-x:auto;
overflow:hidden;
position:relative;
padding:0;
}
.rollbox > table{
background-color: yellow;
width:auto;
height:200px;
margin:0;
padding:0;
}
#loadout{
position:absolute;
top:10px;
left:5px;
z-index:1;
background:#121619;
}
.roller {
border-right:1px solid white;
position:relative;
display: block;
height:100%;
text-align:center;
color:white;
line-height:180px;
font-size:0.8em;
font-weight:bold;
font-family:sans-serif;
}
.roller div{
display:block;
height:50px;
line-height:50px;
position:absolute;
bottom:0;
width:100%;
left:0;
}
.badge{
padding-top:5px;
text-shadow:1px 1px 1px black;
margin-bottom:20px;
}
.line{
width:2px;
height:198px;
top:1px;
left:50%;
position:absolute;
background:#eb3b5a;
opacity:0.6;
z-index:2;
}
.roller{
height:180px;
width:180px;
margin-right:10px;
}
tr,table,td{
margin:0;
padding:0;
}
td:nth-child(even) .roller{
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row topbox">
<div class="col-md-12 col-md-offset-3 rollbox">
<div class="line"></div>
<table>
<tbody>
<tr id="loadout" style="left: -11248px;">
<td>
<div class="roller">
<img width="110" src="">
<div style="background-color:red;">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="msgbox" class="alert alert-warning" style="margin-top:20px;display:none;">You need to add at least 2 lines!</div>
</div>
</div>
</div>
</div>
</div>
<button id="roll" class="btn btn-success form-control">Roll</button>The content is as follows:
Excepteur sint occaecat cupidatat non proident
As well as :
adipiscing elit, sed do eiusmod tempor incididunt
I attempted using
<p style="word-break: break-word;"></p>Here's where the black boxes are created:
loadout.append('<td><div class="roller"><div>'+shuffled[i]+'</div></div></td>');