我使用的是priming p-dropdown模块。我附上了一个<ng-template>，将我的数据显示在三列中，分别是姓名、地址和电子邮件。如果不使用appendTo属性，将导致大量文本拖到下一行，并出现难看的水平滚动条。我使用了appendTo="body"，文本删除问题得到了部分修复，但我仍然看到地址列文本被删除到下一行。经过进一步的研究，我发现p-dropdown输出一个覆盖div元素，在我的情况下，它有一个内联css样式属性'min-width'设置为'473px'。这是输出的div元素。
<div class="ng-trigger ng-trigger-overlayAnimation ng-tns-c5-5 extendWidth ui-dropdown-panel ui-widget ui-widget-content ui-corner-all ui-shadow ng-star-inserted" ng-reflect-klass="extendWidth" ng-reflect-ng-class="ui-dropdown-panel ui-widget u" style="min-width: 473px; z-index: 1001; top: 210px; left: 419.875px; transform: translateY(0px); opacity: 1;">
我使用chrome开发工具将其更改为635px，覆盖面板变得足够宽，可以在一行中显示地址，水平滚动条不再存在。现在，我正试图覆盖Angular的这个内联样式，但我无法做到
- 库文档提供了
panelStyle属性，用于在overlaydiv元素上应用内联样式，我尝试过使用它，但由于!important不能在此处应用(因为它将这些内联样式发送到后端的ngStyle)。所以，这对我来说毫无用处 - 然后我尝试使用
panelStyleClass属性将类设置为extendWidth。类名显示在div上，但与ng-reflect-klass="extendWidth"类似。类中存在的css样式即使使用:host >>>也不适用
<p-dropdown
name="customer"
[style]="{ width: '100%' }"
(onChange)="addCustomer()"
[autoDisplayFirst]="false"
[options]="customers"
[(ngModel)]="selectedCustomer"
optionLabel="fullName"
[filter]="true"
autofocus="true"
[showClear]="true"
required
appendTo="body"
panelStyleClass="extendWidth"
>
<ng-template let-customer pTemplate="item">
<div class="p-grid">
<div class="p-col-3">{{ customer.value.fullName }}</div>
<div class="p-col-6">{{ customer.value.streetAddress }}</div>
<div class="p-col-3">{{ customer.value.email }}</div>
</div>
</ng-template>
</p-dropdown>
它应该允许我以某种方式覆盖自定义最小宽度属性。
要通过在元素上加素数来覆盖min-width集，可以为覆盖面板指定自定义类：
<p-dropdown panelStyleClass="minWidthOverride" ... >
然后在主css文件中设置样式：
.minWidthOverride {
min-width: 650px !important;
}
它必须在主css文件中而不是组件样式中的原因是，您将覆盖层附加到页面的body，而不是作为组件的子级。
查看更新的stackblitz演示
PS：我可能会选择不同的布局，这样地址就不在col-xs-3中，而是在col-xs-12中，这样它就有足够的位置。地址太长，无法在下拉面板的3列中合理显示。
您需要在style.css中添加以下类来覆盖UI下拉列表的样式。
ui-dropdown-panel .ui-dropdown-items-wrapper {
overflow: auto;
min-width: 360px;
}
这里分叉堆叠式解决方案