网页设计电话号码中间加横线怎么加

在网页设计中，如果你想在电话号码中间添加横线以增强可读性或使其看起来更专业，你可以按照以下步骤操作：

1. **文本格式化**: 使用HTML的`<span>`标签，并设置CSS样式。将电话号码分成三部分（通常是区号、分隔符和本地号码），例如：

   <span class="phone-number">00-123-4567890</span>

然后在CSS文件中定义`.phone-number`的样式：

   .phone-number {
     white-space: nowrap; /* 防止单词间换行 */
     text-decoration: none; /* 如果有默认下划线，去除它 */
     display: inline-block;
   }
   .phone-number::before, .phone-number::after {
     content: "-";
     padding: 0 0.2em; /* 添加一些间隔 */
   }

2. **JavaScript或jQuery**: 如果需要动态效果，可以使用JavaScript或jQuery来在用户查看时插入横线。例如：

   function formatPhoneNumber(phone) {
     return phone.split('').map((num, i) => (i % 3 === 2 ? '-' : num)).join('');
   }
   var telInput = document.getElementById('tel-input');
   telInput.addEventListener('input', function() {
     this.value = formatPhoneNumber(this.value);
   });

这里假设有一个输入框`<input id="tel-input" type="tel">`。