CODEWITHSUNDEEP
htmlcss
Maximilian Schaum
Maximilian Schaum

Reputation: 270

CSS line-clamp does not work with nested button

I want a nested button inside a line-clamped container to be properly cut off with ellipsis at 1 line. But even when styling the button to behave exactly like an anchor tag, it still does not work.

Is there any way you can make this work? I mean to make the button behave like the anchor in this scenario, I know there are other ways around this, i.e. applying line-clamp to the button itself etc.

If there is really no way, is this expected behaviour? Or is there an issue with how CSS line-clamp interacts with a nested buttons?

.clamp-line {
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238);
  cursor: pointer;
  display: inline;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
<h2>Nested anchor tag does work</h2>
<div class="clamp-line">
  <a href="#">
    lorem ipsum dolor sit amet consectetur adipisicing elit
  </a>
</div>

<h2>Nested button styled as anchor does not work</h2>
<div class="clamp-line">
  <button>
     lorem ipsum dolor sit amet consectetur adipisicing elit
  </button>
</div>

Upvotes: 1

Views: 35

Answers (1)

jme11
jme11

Reputation: 17374

You could set the display property to contents on your button instead of inline.

.clamp-line {
  -webkit-line-clamp: 1;
  overflow: hidden;
  width: 200px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

button {
  align-items: normal;
  background-color: rgba(0,0,0,0);
  border-color: rgb(0, 0, 238);
  border-style: none;
  box-sizing: content-box;
  color: rgb(0, 0, 238);
  cursor: pointer;
  display: contents;
  font: inherit;
  height: auto;
  padding: 0;
  perspective-origin: 0 0;
  text-align: start;
  text-decoration: underline;
  transform-origin: 0 0;
  width: auto;
  -moz-appearance: none;
  -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height  */
  -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */
}
<h2>Nested anchor tag does work</h2>
<div class="clamp-line">
  <a href="#">
    lorem ipsum dolor sit amet consectetur adipisicing elit
  </a>
</div>

<h2>Nested button styled as anchor works</h2>
<div class="clamp-line">
  <button>
     lorem ipsum dolor sit amet consectetur adipisicing elit
  </button>
</div>

Why it works

The button is the inline element not the text inside the element. The button's outer box keeps everything together, so the clamp basically treats the whole element as one line.

According to the specifications, when display: contents is applied to the button:

display: contents simply removes their principal box, and their contents render as normal.

Upvotes: 0

Related Questions