如何单击CSS文本-溢出省略号在弹出窗口中显示长文本？

<div class="text-container">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod euismod nisi, a ultrices nunc dignissim eu. Sed at nunc nec nunc porttitor efficitur. Sed vel lacinia mi. Nullam auctor, nunc id aliquet tincidunt, urna metus tincidunt nisl, sed fringilla ex neque ut nisi. Sed id odio et nunc fringilla tincidunt. Nullam volutpat, lorem a pellentesque tristique, justo ex aliquam justo, nec lacinia purus nunc id nunc. Sed vitae nunc non nunc lacinia tincidunt. Sed vitae risus id nunc lacinia tincidunt. Sed vitae risus id nunc lacinia tincidunt.
</div>

.text-container {
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}

<button onclick="showPopup()">显示长文本</button>

<script>
function showPopup() {
  // 创建弹出窗口
  var popup = window.open("", "popup", "width=400,height=200");
  
  // 在弹出窗口中显示长文本
  popup.document.write('<div class="text-container">' + document.querySelector('.text-container').innerHTML + '</div>');
  
  // 应用相同的CSS样式
  popup.document.write('<style>.text-container { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }</style>');
}
</script>