如何在自定义按钮中用省略号（...）截断文件名？

你给自定义文件按钮设置了text-overflow: ellipsis、white-space: nowrap和overflow: hidden，但没实现文件名截断，核心原因是按钮用了display: flex布局——text-overflow: ellipsis只对块级容器内的单行文本生效，而flex容器的匿名文本子元素不会被限制宽度触发截断规则。

解决步骤： #

1. 修改HTML，给按钮文本添加容器
   在按钮内部新增<span>包裹文本，让它成为可控制的flex子项：

   <div id="slikadiv">
       <input type="file" name="real_file" id="real_file" accept=".jpg, .jpeg, .png" value="" hidden="hidden">
       <button type="button" id="custom_button" class="inputslika">
           <span class="button-text">Izaberi sliku</span>
       </button>
   </div>
   

2. 调整CSS，配置文本容器的截断规则
   保留原按钮样式，新增文本容器样式，让它填充按钮剩余空间并触发截断：

   #slikadiv {
       width:250px;
   }
   
   .inputslika {
       border-radius: 5px;
       height: 45px;
       background-color: #f6f6f6;
       border: 1.5pt solid black;
       background-image: url("../slike/add.svg");
       background-size: 32px;
       background-repeat: no-repeat;
       background-position: calc(100% - 8px) center;
       color: black;
       display: flex;
       align-items: center;
       font-size: small;
       padding-left: 10px; /* 替换text-indent，避免容器布局冲突 */
       justify-content: flex-start;
       width: 100%;
       gap: 8px; /* 可选，给图标和文本留间距 */
   }
   
   .button-text {
       flex: 1; /* 占满按钮剩余可用空间 */
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }
   

3. 修改JS代码，更新文本到容器内
   把设置按钮文本的逻辑改为操作内部span，同时修正一处语法错误：

   function dodajSliku() {
       $("#custom_button").click(function() {
           $("#real_file").click();
       })
   
       $("#real_file").change(function() {
          if ($("#real_file").val()) {
           let vrednost = $("#real_file").val();
           vrednost = vrednost.replace("C:\\fakepath\\", "");
           $("#custom_button .button-text").text(vrednost); // 改为操作span
           $("#custom_button").css("background-image", "url('../slike/finish.svg')");
           $("#custom_button").css("color", "black");
          } else {
           $("#real_file").val(""); // 修正原语法错误
          }
       })
   }
   dodajSliku();
   

调整完成后，当文件名超过按钮宽度时，就会自动显示省略号完成截断。

内容的提问来源于stack exchange，提问作者user21626341