Question

我遇到了问题。我有以下html布局

<div class="accordion-list-item__controls is-opened">
    <span class="accordion-list-item__toggle-icon fa"></span>
    <span class="accordion-list-item__icon fa fa-mobile-phone"></span>
    <a class="accordion-list-item__link" href="http://crosp.net/category/software-development/mobile/" title="View all posts in Mobile Development">Mobile Development</a>
    <div class="accordion-list-item__post-count">7</div>
</div>

和css

.accordion-list-item {
    width: 100%;
    display: block;
   }
    .accordion-list-item__icon {
      font-size: 1.125em;
      display: inline-block;
      margin-left: 0.27778em;
      text-indent: 0; }
    .accordion-list-item__toggle-icon {
      cursor: pointer;
      margin: 0;
      padding: 0; }
      .accordion-list-item__toggle-icon::before {
        display: inline-block;
        content: "";
        color: transparent;
        text-indent: 0;
        font-family: "FontAwesome"; }
    .accordion-list-item__link {
      text-indent: 0;
      margin-left: 0.4375em;
      display: inline-block;
      white-space: initial;
      max-width: 70%;
      vertical-align: middle;
      color: #797e83; }
      .accordion-list-item__link:visited, .accordion-list-item__link:link {
        color: #797e83; }
      @media only screen and (max-width: 992px) {
        .accordion-list-item__link {
          max-width: 60%; } }
      @media only screen and (max-width: 768px) {
        .accordion-list-item__link {
          max-width: 80%; } }
      @media only screen and (max-width: 480px) {
        .accordion-list-item__link {
          max-width: 60%; } }
    .accordion-list-item__post-count {
      text-indent: 0;
      font-size: 0.8125em;
      position: absolute;
      display: inline-block;
      right: 0;
      color: #797e83;
      padding: 0 0.61538em;
      margin-right: 0.61538em;
      border: 1px solid #68c3a3;
      border-radius: 10px;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
      -o-transition: all 0.5s;
      transition: all 0.5s; }
    .accordion-list-item__controls {
      padding: 0.625em 0.3125em;
      position: relative;
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      display: block;
      color: #797e83; }
      .accordion-list-item__controls:hover {
        color: #68c3a3; }
        .accordion-list-item__controls:hover .accordion-list-item__link {
          color: #68c3a3; }
        .accordion-list-item__controls:hover .accordion-list-item__post-count {
          color: #f7f7f7;
          background-color: #68c3a3; }
        .accordion-list-item__controls:hover::after {
          border-color: #68c3a3; }
      .accordion-list-item__controls::after {
        content: '';
        display: block;
        position: absolute;
        border-bottom: 1px solid transparent;
        bottom: 0;
        width: 100%;
        left: 0;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s; }
    .accordion-list-item.is-active > .accordion-list-item__controls::after {
      border-color: #68c3a3; }
    .accordion-list-item.has-children > .accordion-list-item__controls .accordion-list-item__toggle-icon::before {
      content: "";
      color: #797e83; }
    .accordion-list-item.has-children > .accordion-list-item__controls.is-opened .accordion-list-item__toggle-icon::before {
      content: "";
      color: #68c3a3; }

问题是accordion-list-item__post-count绝对定位，我在某些屏幕上得到了结果

正如您所看到的，我尝试设置文本最大宽度，但由于text-indent（嵌套项的填充是使用动态生成的文本缩进完成的）我无法设置一致属性（最大宽度）。

即使使用JS / jQuery，我也在寻找任何类型的解决方案。

但可以肯定的是，CSS解决方案非常有价值。

请分享您的想法如何解决此问题。我将不胜感激任何帮助。

如何检测文本缩进和绝对位置的溢出

0 个答案: