如何在div上没有滚动条的情况下启用输入样式的滚动？

Question

我有一个链接，允许用户将其复制到剪贴板。

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

当输入值长于输入值时，默认的浏览器行为是：如果用户单击并选择右侧的文本，则允许x轴滚动而没有滚动条：

我希望此链接也可以作为<a href=>单击，但要保留输入的样式。我想到的最简单的方法就是使用form-control设置div的样式并应用overflow-x: hidden;，但是这意味着文本不会像在input中一样以相同的行为滚动：< / p>

<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和form-control-scrollable属性，并且在我的样式代码中，子元素位置应为absolute与overflow-x: auto;一样。

Trick:我的孩子（锚标签）身高增加了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>