vue中目前有一个大的div包着两个小的div , 两个小的div在一排显示且浏览器窗口缩小时 , 小的div不会折行显示, 大的div宽度定死800px , 小的div的宽度由内容撑开 , 且左边小的宽度为100px , 当两个小的div文字内容加起来超出本身的盒子宽度时 , 所超出的部分由...表示 , 并且当...出现时 , 允许文字触发hover事件 , 弹出Popover弹出框 , Popover弹出框里的内容为文字的完整内容 ,且Popover的宽度为500px , 超出折行

好的，让我来回答您的问题。

您可以使用CSS中的flexbox布局来实现两个小的div在一排显示，且不会折行。同时，您可以使用CSS中的text-overflow属性来控制文本溢出时的显示效果。具体实现方式如下：

首先，给大的div设置宽度为800px，并使用display:flex和justify-content:space-between属性来使两个小的div在一排显示：

<div class="container">
  <div class="small left">Left content</div>
  <div class="small right">Right content</div>
</div>

.container {
  width: 800px;
  display: flex;
  justify-content: space-between;
}

然后，给左边的小div设置宽度为100px，并在右边的小div中使用max-width属性来使其宽度由内容撑开：

.small {
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.left {
  width: 100px;
}

.right {
  max-width: calc(100% - 100px);
}

接下来，使用white-space属性来控制文本的换行方式，使用text-overflow属性来控制文本溢出时的显示效果。当文本溢出时，使用:hover伪类来触发hover事件，弹出Popover弹出框，并在其中显示完整的文本内容：

.small {
  /* ... */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.small:hover {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.popover {
  width: 500px;
  white-space: normal;
  word-wrap: break-word;
}

最后，使用一个Popover弹出框来显示完整的文本内容。在Popover弹出框中使用white-space和word-wrap属性来控制文本的换行方式，使其不会溢出Popover弹出框。

以上就是实现该功能的一种方式，希望能对您有所帮助。