fix: file names overflow in file input

pywebio/html/css/app.css

@@ -269,4 +269,12 @@ details[open]>summary {
     box-sizing: border-box;
     padding: 0;
 }
-/*End of Tabs widget*/
+/*End of Tabs widget*/
+
+.custom-file-label > span {
+    overflow: hidden;
+    width: calc(100% - 6ch - 0.75rem) !important; /* 6ch is for "Browse", 0.75rem is for the padding of "Browse" button */
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: inline-block !important;
+}

webiojs/src/models/input/file.ts

@@ -8,7 +8,7 @@ const file_input_tpl = `
     {{#label}}<label for="{{id_name}}">{{label}}</label>{{/label}}
     <div class="custom-file">
         <input type="file" name="{{name}}" class="custom-file-input" id="{{id_name}}" aria-describedby="{{id_name}}_help">
-        <label class="custom-file-label" for="{{id_name}}">{{placeholder}}</label>
+        <label class="custom-file-label" for="{{id_name}}"><span>{{placeholder}}</span></label>
         <div class="invalid-feedback">{{invalid_feedback}}</div>  <!-- input 添加 is-invalid 类 -->
         <div class="valid-feedback">{{valid_feedback}}</div> <!-- input 添加 is-valid 类 -->
         <small id="{{id_name}}_help"  class="form-text text-muted">{{help_text}}</small>