CSS-зажим строки не работает с вложенной кнопкой ⇐ Html

[Anonymous]

Я хочу, чтобы вложенная кнопка внутри контейнера с фиксированной строкой была правильно обрезана многоточием на 1 строке. Но даже если оформить кнопку так, чтобы она вела себя точно так же, как тег привязки, она все равно не работает.
Есть ли способ заставить это работать? Я хочу, чтобы в этом сценарии кнопка вела себя как якорь. Я знаю, что есть другие способы обойти эту проблему, например, применить зажим строки к самой кнопке и т. д.
Если действительно нет кстати, это ожидаемое поведение? Или есть проблема с тем, как CSS-зажим строки взаимодействует с вложенными кнопками?

Код: Выделить всё

.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 */
}

Код: Выделить всё

Nested anchor tag does work

[url=#]
lorem ipsum dolor sit amet consectetur adipisicing elit
[/url]

Nested button styled as anchor does not work


lorem ipsum dolor sit amet consectetur adipisicing elit

Подробнее здесь: https://stackoverflow.com/questions/793 ... ted-button