工作中关于文字溢出的问题

上午项目经理向我展示了一个问题：
在一个固定宽高的布局中，有几行文字展示了对象的不同属性信息，其中一行有可能超出了一行的宽度，自动折行后，这样就打乱了布局。

我的想法是这样的：将溢出部分以省略号显示，接着鼠标移入元素时，将完整部分以盒子显示，如下：

首先，将需要省略的部分赋予如下的样式：

    .control-scale{
      width: 100%;
      overflow: hidden;/*超出部分隐藏*/
      white-space: nowrap;/*不换行*/
      text-overflow:ellipsis;/*超出部分文字以...显示*/
    }

接着显示：

showAllScale(index) {
           const scaleWindow = this.$refs.controlScale[index];
          if(scaleWindow.clientWidth<scaleWindow.scrollWidth) {   //判断是否溢出
              allScaleShow = true;
          }
 }

在这个过程中，有几个未曾使用过的css属性样式在此记录一下：

white-space

这个属性声明建立布局过程中如何处理元素中的空白符，属性值：
normal：默认。即文本内容很多，该换行时就换行了。
nowrap：文本不会换行，文本会在在同一行上继续，直到遇到
标签为止，即使溢出也不会折行。
pre：空白会被浏览器保留，即文本中若是有enter换行符，那就会遵从输入内容院本的格式，但不会正常换行。
pre-wrap：空白会保留，也会自动换行。
pre-line： 会换行，但会合并空白符。
inherit：从父元素继承 white-space 属性的值。

text-overflow

规定当文本溢出包含元素时发生的事情，属性值：
clip：修剪文本。
ellipsis：显示省略符号代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。 //兼容性很差

word-wrap

属性允许长单词或 URL 地址换行到下一行，属性值：
normal：只在允许的断字点换行（浏览器保持默认处理）；
break-word：在长单词或 URL 地址内部进行换行，比如英文单词换行。