3、外部样式表

创建一个单独的CSS文件（styles.css），然后在HTML文档中使用标签将其链接到HTML文档，将水平线的宽度设置为50%：

在styles.css文件中：

hr {
  width: 50%;
}

在HTML文档中：

4、使用CSS类和ID选择器

为水平线创建一个CSS类或ID，并在CSS中定义该类的样式，将水平线的宽度设置为50%：

在HTML文档中：

 >

在CSS文件中：

.shorthr { /* 或者 #shorthr */
  width: 50%;
}

5、使用媒体查询（响应式设计）

根据屏幕尺寸调整水平线的宽度，当屏幕宽度小于600px时，将水平线的宽度设置为75%：

在CSS文件中：

@media (maxwidth: 600px) {
  hr { /* 或者 #shorthr, .shorthr */
    width: 75%; /* 根据需要调整宽度 */
  }
}

通过以上方法，你可以根据需要轻松地使HTML中的水平线变短，你可以选择最适合你项目的方法，并根据需要进行调整。