ngx-pagination能否禁用省略号？分页样式优化咨询

我来帮你搞定这三个ngx-pagination的问题，下面是针对每个需求的具体解决方案：

1. 增大分页项间距，扩展组件宽度 #

通过调整CSS来给分页项增加间距，并让组件占满可用宽度：

.ngx-pagination {
  width: 100%; /* 让分页组件铺满父容器宽度 */
  display: flex;
  justify-content: center; /* 页码居中显示 */
  padding: 0;
}

.ngx-pagination li {
  margin: 0 10px; /* 增大页码项之间的左右间距，可根据需求调整数值 */
  list-style: none;
}

.ngx-pagination .current {
  background: orange; /* 保留你原来的当前页样式 */
}

2. 宽度充足时显示更多页码，减少省略号 #

在pagination-controls组件中配置maxSize属性，设置你希望显示的最大页码数量，结合responsive属性实现自适应：

<pagination-controls 
  responsive="true" 
  directionLinks="false"
  [maxSize]="12" <!-- 设置宽度充足时显示的最大页码数，数值按需调整 -->
></pagination-controls>

maxSize控制了默认状态下显示的页码数量，开启responsive后，当屏幕宽度不足时会自动减少显示的页码，宽度充足时就会展示你设置的最大数量，从而减少省略号的出现。

3. 添加项目符号分隔符（解决位置错误问题） #

之前的分隔符显示在页码下方且仅对当前页生效，是因为伪元素的定位或选择器问题。我们可以给每个非首个页码项添加前置项目符号：

/* 给除第一个页码项外的所有项添加前置分隔符 */
.ngx-pagination li:not(:first-child)::before {
  content: "•"; /* 项目符号，可替换为"|"等其他符号 */
  display: inline-block;
  margin-right: 10px; /* 分隔符与页码的间距 */
  color: #999; /* 分隔符颜色，按需调整 */
  vertical-align: middle; /* 确保分隔符与页码垂直对齐 */
}

/* 确保当前页的分隔符样式一致 */
.ngx-pagination .current::before {
  content: "•";
  display: inline-block;
  margin-right: 10px;
  color: #999;
  vertical-align: middle;
}

这样设置后，分隔符会和页码在同一行显示，且对所有页码项生效，不会只局限于当前页。

把以上代码整合后，就能同时满足你的三个需求啦！

内容的提问来源于stack exchange，提问作者chick3n0x07CC