span标签不支持设置宽度高度的解决办法；span强制单行显示，超出部分省略号表示或者隐藏，设置显示的最大宽度

---

一、块级元素与行内元素

在进入正题之前我们先来了解一下什么是块级元素，什么是行内元素。
①块级元素：比如：div标签，h标签，这些都是块级元素，块级元素的特点是：块级元素独占一行，而且块级元素中能写行内元素和块级元素。
②行内元素：比如常用的span标签，span标签也是文本标签，行内元素的特点：行内元素不独占一行，行内元素能写行内元素，但是不能写块级元素。

---

提示：以下是本篇文章正文内容，下面案例可供参考

二、span标签设置宽度和高度

将span从行内元素变成行内块元素或者块元素就可以调了： 设置样式的时候加上 display:inline-block; 或者 display:block;即可。
span的默认样式属性为display:inline;——类似于a、strong标签的宽高等属性不可定制的元素特性，也就是行内元素。

代码示例如下：

span {
        white-space: nowrap; /*强制单行显示*/
        text-overflow: ellipsis; /*文本超出部分省略号表示*/
        overflow: hidden; /*文本超出部分隐藏*/
        width: 260px; /*设置文本显示的最大宽度*/
        display: inline-block/*设为行内块元素*/;
        vertical-align: top;
      }

三、字体样式

字体设置也是网页设计中的重要组成部分，合适的字体不仅会使页面更加美观，也可以提升用户体验。CSS 中提供了一系列用于设置文本字体样式的属性，比如更改字体，控制字体大小和粗细等等。

font-family：设置字体；
font-style：设置字体的风格，例如倾斜、斜体等；normal：普通字体;italic：斜体;oblique：倾斜字体
font-weight：设置字体粗细；normal：正常粗细；bold：粗体；bolder：更粗的字体；lighter：更细的字体
font-size：设置字体尺寸；
font-variant：将小写字母转换为小型大写字母；
font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）；
font：字体属性的缩写，可以在一个声明中设置多个字体属性。

四、行内样式

行内样式（也称内联样式）写在HTML的单个元素中，将多个声明写在style后面，并且声明之间用分号隔开

例如：

<h1 style="color:red;font-size:20px;">天时子平</h1>

---

总结

记录span设置宽高的方法，以及其他一些常用属性的设置。