通过元素使文本不是 go，当用 javascript 更改值时

Question

I want to make a text preview, in multiple input file type. I already make it but if the file is to much the text go through the element. I try to wrap it but its not work. How I can make the text crop when the files is to much?

Example Codepen

HTML

<div class="form-group row">
  <div class="col-sm-9 buat-input-div">
    <label class="custom-file-label">Pilih File</label>
    <input multiple type="file" class="form-control buat-input buat-input-file custom-file-input custom-file-input-multiple" name="filename"  required>
  </div>
</div>

Javascript

$(".custom-file-input-multiple").on("change", function() {
  var files = $(".custom-file-input-multiple")[0].files;
  var nama = '';
  for (var i = 0; i < files.length; i++)
  {
    nama += ' ,'+files[i].name;
  }
  $(this).siblings(".custom-file-label").addClass("selected").html(nama);
});

Answer 1

Use css overflow property to hide elements outside the bounding box

Use bootstrap class overflow-hidden

    <div class="col-sm-9 buat-input-div overflow-hidden">File</label>

Demo: https://codepen.io/Hex0/pen/KKVLYpg