调整文本溢出 div 大小时如何处理错误的宽度计算？答案

【问题标题】：How to handle wrong width calculation when sizing text-overflow div?调整文本溢出 div 大小时如何处理错误的宽度计算？
【发布时间】：2020-04-16 10:40:45
【问题描述】：

我正在创建一个splitter-resizer in Angular 来调整 2 个面板的宽度。有 2 个水平部分，每侧的列宽必须相同。但是，我注意到在触及文本溢出元素的边界处宽度计算是错误的。这会导致顶部和底部面板偏离大约单个文本字符的大小。

如何确保 div 宽度符合 ngStyle 设置？

编辑：我注意到，如果我将蓝色 panel2 的宽度设置为未定义，看起来 2 个面板的大小和对齐方式正确，但我认为这不是正确的方法。

app.component.html

<div #container class="container">
  <div class="section flex-container-row">
    <div [ngStyle]="stylePanel1" class="panel1">1</div>
    <div class="resizer" (click)="startdrag()" (mousedown)="startdrag($event)"></div>
    <div [ngStyle]="stylePanel2" class="panel2 flex-container-row">2</div>
  </div>

  <div class="section flex-container-row">
    <div [ngStyle]="stylePanel1" class="panel1">
      <div class="longtext">this is a very long text that should be cut off when resizing.</div>
    </div>
    <div class="resizer" (click)="startdrag()" (mousedown)="startdrag($event)"></div>
    <div [ngStyle]="stylePanel2" class="panel2">4</div>
  </div>
</div>

app.component.scss

* {
  box-sizing: border-box;
  margin: 0; padding: 0; 
}

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background-color: pink;
}

.section {
  width: 100%;
  height: 130px;
  border: 1px solid magenta;
}

.flex-container-row {
  display: flex;
  flex-direction: row;
}

.resizer {
  flex: 0 0 5px;
  background-color: #ddd;
  cursor: ew-resize;
}

.panel1 {
  background-color: red;
  width: 100px;
}

.panel2 {
  background-color: blue;
}

.longtext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

【问题讨论】：

你可以考虑用 this.refContainer.nativeElement.clientWidth 代替 refContainer.nativeElement.getBoundingClientRect()
@AshishYadav 您应该将此添加为答案。如果没有其他更好的答案，我会接受你的答案！谢谢！

标签： html css angular flexbox overflow

【解决方案1】：

而不是this.refContainer.nativeElement.clientWidth。可以考虑refContainer.nativeElement.getBoundingClientRect()

【讨论】：