文字溢出替换textarea

src/app/pages/left-domain/left-domain.component.html

@@ -67,14 +67,14 @@
             <p>品牌</p>
             <p>油枪数量</p>
             <p>油品品号</p>
-            <p>油枪编号</p>
+            <p class="overflowP">油枪编号</p>
             <p>油泵类型</p>
           </div>
           <div class="tableContent"> 
             <p [title]="item.getPropertyData().brand"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().brand" (click)="stopBubbling($event)"></p>
             <p [title]="item.getPropertyData().oilGunNum"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNum" (click)="stopBubbling($event)"></p>
             <p [title]="item.getPropertyData().oilProductNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
-            <p [title]="item.getPropertyData().oilGunNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().oilGunNo" class="overflowP"><textarea [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)"></textarea></p>
             <p style="padding-left: 8px;" (click)="stopBubbling($event)">
               <nz-select class="tableSelect" [nzBorderless]="true" [nzDisabled]="!editMode" [(ngModel)]="item.getPropertyData().oilPumpType">
                 <nz-option nzValue="zxb" nzLabel="自吸泵"></nz-option>
@@ -93,7 +93,7 @@
         <div class="table">
           <div class="tableHeader">
             <p>油品品号</p>
-            <p>油枪编号</p>
+            <p class="overflowP">油枪编号</p>
             <p>油罐容积</p>
             <p>安全容积</p>
             <p>罐区</p>
@@ -101,7 +101,7 @@
           </div>
           <div class="tableContent">
             <p [title]="item.getPropertyData().oilProductNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
-            <p [title]="item.getPropertyData().oilGunNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)"></p>
+            <p [title]="item.getPropertyData().oilGunNo" class="overflowP"><textarea [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)"></textarea></p>
             <p [title]="item.getPropertyData().oilTankVolume"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilTankVolume" (click)="stopBubbling($event)"></p>
             <p [title]="item.getPropertyData().safeVolume"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().safeVolume" (click)="stopBubbling($event)"></p>
             <p [title]="item.getPropertyData().tankFarm"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().tankFarm" (click)="stopBubbling($event)"></p>

src/app/pages/left-domain/left-domain.component.scss

@@ -70,6 +70,7 @@
     border-bottom: none;
     display: flex;
     p{ height: 32px; line-height: 32px; margin: 0px; }
+    .overflowP{ height: 50px; line-height: 50px; textarea{ border: none; outline: none; resize: none; background-color: transparent; width: 100%; height: 100%; padding: 0; line-height: 24px; } }
     .tableHeader{
       flex: 4;
       text-align: right;