前端开发经验——html行内元素没有width（设置宽度无效）

最近想实现这么一个效果，就是当元素中的文字长度超过元素指定长度时把多余的部分用省略号来表示，当鼠标放大元素上面时可以显示全部的文字信息，于是在网上找了一些实现方法，使用了如下css样式来实现：

html代码：

<div>
  <span class="viewtitle" title="我是一串很长的文字，超过了指定的宽度后用省略号显示超出部分">
  我是一串很长的文字，超过了指定的宽度后用省略号显示超出部分
  </span>
</div>

css代码：

.viewtitle{
    width:150px; /*设置div或者span的固定宽度*/
    overflow:hidden; /*文字超出宽度部分隐藏*/
    text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本*/
    white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
    word-break:keep-all; /*只能在半角空格或连字符处换行*/
}

然后发现并没有达到我想要的效果，于是又上网查了一些资料，才搞清楚了，原来是html的行内元素，而html行内元素是没有宽高的！也就是说没有width，如果想要行内元素有宽高的话，可以将行内元素转化为块级元素或者行内块元素，就是加上如下代码即可：

display:block;（转为块元素，独占一行）
display:inline-block;（转为行内块元素，在一行内显示但又有宽高）

所以可以在上面css代码中加上display:block或者display:inline-block就可以实现我们想要的效果了，新的css代码如下：

.viewtitle{
    display:inline-block; /*将span设置为行内块级元素，使其有宽度，这样下面设置的width才有效果*/
    width:150px; /*设置div或者span的固定宽度*/
    overflow:hidden; /*文字超出宽度部分隐藏*/
    text-overflow:ellipsis; /*显示省略符号来代表被修剪的文本*/
    white-space:nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止*/
    word-break:keep-all; /*只能在半角空格或连字符处换行*/
}