Force to behave as display:inline instead of inline-block

问题

I would like to use the <details> / <summary> tags for pure CSS popups, but <summary> behaves as inline-block and I cannot change it to inline.

Is there any way to force <summary> to behave as display:inline instead of inline-block?

<!DOCTYPE html>
<html>
  <head>
    <style>

      summary {
        color: red;
      }
      
      summary::-webkit-details-marker {
        display: none;
      }

      details, summary {
        display: inline;
        /* hyphens: manual;/ */
        /* word-break: break-all; */
        /* overflow-wrap: anywhere; */
        /* white-space: unset; */
      }

      .mimic {
        color: darkseagreen;
        display: inline-block;
      }

    </style>
  </head>
  <body>
    <span>
      I would like to use the &ltdetails&gt / &ltsummary&gt tags for
      pure CSS popups,
      <details>
        <summary>
            but &ltsummary&gt behaves as inline-block
        </summary>
        (I'm fine with &ltdetails&gt)
      </details>
      and I cannot change it to inline. Is there any way to force &ltsummary&gt
      to behave as display:inline instead of inline-block?
      <br><br>
      I would like to use the &ltdetails&gt / &ltsummary&gt tags for
      pure CSS popups,
      <span class="mimic">
        but &ltsummary&gt behaves as inline-block
      </span>
      and I cannot change it to inline. Is there any way to force &ltsummary&gt
      to behave as display:inline instead of inline-block?
      <p>
        Just start to play with the width of the viewport...
      </p>
    </span>
  </body>
</html>

回答1:

display: contents; can do it but it will behave strangely:

summary {
  color: red;
}

summary::-webkit-details-marker {
  display: none;
}

details,
summary {
  display: contents;
  /* hyphens: manual;/ */
  /* word-break: break-all; */
  /* overflow-wrap: anywhere; */
  /* white-space: unset; */
}

.mimic {
  color: darkseagreen;
  display: inline-block;
}

<span>
      I would like to use the &ltdetails&gt / &ltsummary&gt tags for
      pure CSS popups,
      <details>
        <summary>
            but &ltsummary&gt behaves as inline-block
        </summary>
        (I'm fine with &ltdetails&gt)
      </details>
      and I cannot change it to inline. Is there any way to force &ltsummary&gt
      to behave as display:inline instead of inline-block?
      <br><br>
      I would like to use the &ltdetails&gt / &ltsummary&gt tags for
      pure CSS popups,
      <span class="mimic">
        but &ltsummary&gt behaves as inline-block
      </span> and I cannot change it to inline. Is there any way to force &ltsummary&gt to behave as display:inline instead of inline-block?
<p>
  Just start to play with the width of the viewport...
</p>
</span>

来源：https://stackoverflow.com/questions/64069910/force-summary-to-behave-as-displayinline-instead-of-inline-block

标签

html