Контур переходит в фокус

Question

У меня проблема, когда контур элемента нарушается при фокусировке. Я не знаю, как это решить, какое-то время застрял на этом.

Примечание: я не могу изменить высоту или высоту строки, а также не могу удалить переполнение, установленное в заголовке теста.

Это можно решить, если я сделаю заголовок теста фокусируемый элемент. Но хочу избежать и этого.

.container {
  display: flex;
}
.test {
  width: 100px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #d8dde6;
  font-family: sans-serif;
  padding-left: 10px;
  cursor: pointer;
  position: relative;
  height: 30px;
}

.test-header {
  line-height: 30px;
  overflow-y: hidden;
  display: inline-block;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: 70%;
  text-transform: capitalize;
  font-size: 13px;
}

    <div class="container">
      <span class="test" tabindex="0"
        ><span class="test-header">Test big content</span></span
      >
    </div>

ОБНОВЛЕНИЕ: ответ, предложенный ниже @AlwaysHelping, хорош, но как бы нарушает функцию многоточия.

Answer 1

Похоже, вы выполняете span, а span

display: inline-block не требуется в этом сценарии.

См. Рабочий пример.

.container {
  display: flex;
}
.test {
  width: 100px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #d8dde6;
  font-family: sans-serif;
  padding-left: 10px;
  cursor: pointer;
  position: relative;
  height: 30px;
}

.test-header {
  line-height: 30px;
  overflow-y: hidden;
  white-space: nowrap;
  overflow-x: hidden;
  text-overflow: ellipsis;
  width: 70%;
  text-transform: capitalize;
  font-size: 13px;
}

<div class="container">
      <span class="test" tabindex="0"><span class="test-header">Test</span></span>
    </div>

Надеюсь, это поможет.