代码之家 › 专栏 › 技术社区 › alias51

如何在div上启用不带滚动条的输入样式滚动?

bootstrap-4 twitter-bootstrap css

alias51 · 技术社区 · 5 年前

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

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

我希望此链接也可以作为 <a href=> 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上启用不带滚动条的滚动?

0 回复 | 直到 5 年前

Raeesh Alam 5 年前

使用 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>

sumita patel 5 年前

试试这个-

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>