如何限制datalist中的单词数？

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

<style>
  #browsers option {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px; /* 根据需要调整 */
  }
</style>

<input list="browsers" name="browser">
<datalist id="browsers">
  <!-- 选项将通过 JavaScript 动态添加 -->
</datalist>

<script>
  const options = ["Internet Explorer", "Firefox", "Chrome", "Opera", "Safari"];
  const datalist = document.getElementById('browsers');
  const maxLength = 10; // 最大单词数

  options.forEach(option => {
    const truncatedOption = option.split(' ').slice(0, maxLength).join(' ');
    const opt = document.createElement('option');
    opt.value = truncatedOption;
    datalist.appendChild(opt);
  });
</script>

<input list="browsers" name="browser" title="完整值">
<datalist id="browsers">
  <!-- 选项将通过 JavaScript 动态添加 -->
</datalist>

<script>
  // ...之前的 JavaScript 代码
  options.forEach(option => {
    const truncatedOption = option.split(' ').slice(0, maxLength).join(' ');
    const opt = document.createElement('option');
    opt.value = truncatedOption;
    opt.title = option; // 设置工具提示为完整值
    datalist.appendChild(opt);
  });
</script>