Как включить прокрутку в стиле ввода без полос прокрутки в div?

Question

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

<div class="col-3">
    <input type="text" class="form-control" 
       value="http://www.[].com/thisisareallylongurlthatwilldefinitelyrequiresomexaxisscrolling">
</div>

Когда входное значение длиннее входного, поведение браузера по умолчанию разрешает прокрутку по оси x без полос прокрутки, если пользователь щелкает и выбирает текст справа:

Я хочу, чтобы эта ссылка также была кликабельной как <a href=>, но сохраняла стиль ввода. Самый простой подход, о котором я подумал, - это просто стилировать div с form-control и применить overflow-x: hidden;, однако это означает, что текст не прокручивается с тем же поведением, как если бы он был в input:

<div class="col-3">
    <div class="form-control"> 
      <a href="http://www.[].com/thisisareallylongurlthatwilldefinitelyrequiresomexaxisscrolling">
      http://www.[].com/thisisareallylongurlthatwilldefinitelyrequiresomexaxisscrolling</a>
</div>

Как включить прокрутку без полос прокрутки в div?

Answer 1

Используйте white-space: nowrap; и hidden Propertry для form-control-scrollable класса и положение дочернего элемента должно быть absolute с overflow-x: auto;, как показано ниже в моем коде стиля.

Trick: I увеличена высота дочернего элемента (тега привязки) на 100% + 28px для скрытия нижней полосы прокрутки.

.form-control-scrollable{
  position: relative;
  white-space: nowrap;
  overflow: hidden;
}
.form-control-scrollable a{
  position: absolute;
  top: 6px;
  width: calc(100% - 28px);
  height: calc(100% + 28px); /*28px increase height for hide bottom scrollbar for 28px */
  color: inherit;
  text-decoration: none;
  overflow-y: hidden;
  overflow-x: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container my-4">
  <div class="row">
    <div class="col-sm-8 col-md-6">
      <div class="form-control form-control-scrollable"> 
        <a href="http://www.[].com/thisisareallylongurlthatwilldefinitelyrequiresomexaxisscrolling">
          http://www.[].com/thisisareallylongurlthatwilldefinitelyrequiresomexaxisscrolling
        </a>
      </div>
    </div>
  </div>
</div>

Answer 2

Попробуйте это -

a {
    width: 200px;
    max-width: 200px;
    border: 1px solid black;
    display: inline-block;
    overflow-x: auto;
	}
	a::-webkit-scrollbar { 
		display: none; 
	} 

<a href="http://www.sdkjnsjk.com/thisisareallylongurlthatwilldefinitelyrequiresomexaxisscrolling">
          http://www.kdsjnjdsk.com/thisisareallylongurlthatwilldefinitelyrequiresomexaxisscrolling</a>