body { font-family: sans-serif; background: #fff; color: #000; } /* The basic container */ .container { overflow: hidden; /* To make the width of the container exact. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content { white-space: nowrap; position: relative; overflow: hidden; /* Required to make ellipsis work */ text-overflow: ellipsis; /* Starting transition */ left: 0%; width: 100%; /* Tweak 'till your heart's content */ -webkit-transition: left 3s, width 3s; -moz-transition: left 3s, width 3s; transition: left 3s, width 3s; } /* The magic! */ .container:hover .content { /* This is not completely accurate. It resizes to 2x the current width. */ left: -100%; width: 200%; } /* -------------------------------------------- */ /* STYLES FOR THIS EXAMPLE */ .frame { background: #888; padding: 10px 0 0; } h1 { margin: 10px; color: #fff; text-shadow: 0px 1px 0px #000; } ul.tabs { border-bottom: 1px solid #666; margin: 0; padding: 0; height: 34px; z-index: 1; } ul.tabs li { display: block; float: left; border: 1px solid #666; background: #eee; padding: 10px 10px; height: 35px; margin-left: 10px; width: 150px; z-index: 2; font-size: 13px; font-weight: bold; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.1); color: #666; } ul.tabs li.selected { background: #fff; border-bottom: 1px solid #fff; box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.3); color: #000; } ul.tabs li .content { /* This has a slight delay on it. */ -webkit-transition: left 3s 0.5s, width 3s 0.5s; -moz-transition: left 3s 0.5s, width 3s 0.5s; transition: left 3s 0.5s, width 3s 0.5s; } ul.tabs li:hover { color: #000; box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.3); } ul.tabs li:hover .content { left: -80%; }
<p>Hover over the red box below and watch the text scroll left!</p> <div class="container" style="border: 5px solid red; width: 300px; padding: 10px;"> <div class="content" style="background: #0f0;">I am text that is really way too long for this box. But I can be scrolled over! (There's a lot more text that does not get rendered.)</div> </div> <p>This implementation isn't perfect but it's a great way to reveal long bits of information in a small space.</p> <p>Now a more real-world use case (with a slight delay on hover):</p> <div class="frame"> <h1>Your Accounts</h1> <ul class="tabs"> <li class="container selected"> <div class="content">Alpha National Bank - xxxx1234</div> </li> <li class="container"> <div class="content">Zeta First Investments - xxxx2345</div> </li> <li class="container"> <div class="content">Beta Gamma Delta Trusts - xxxx3456</div> </li> </ul> </div> <p><em>Note:</em> This technique does not work with IE9 or earlier.</p>
body { font-family: sans-serif; background: #fff; color: #000; } /* The basic container */ .container { overflow: hidden; /* To make the width of the container exact. */ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .content { white-space: nowrap; position: relative; overflow: hidden; /* Required to make ellipsis work */ text-overflow: ellipsis; /* Starting transition */ left: 0%; width: 100%; /* Tweak 'till your heart's content */ -webkit-transition: left 3s, width 3s; -moz-transition: left 3s, width 3s; transition: left 3s, width 3s; } /* The magic! */ .container:hover .content { /* This is not completely accurate. It resizes to 2x the current width. */ left: -100%; width: 200%; } /* -------------------------------------------- */ /* STYLES FOR THIS EXAMPLE */ .frame { background: #888; padding: 10px 0 0; } h1 { margin: 10px; color: #fff; text-shadow: 0px 1px 0px #000; } ul.tabs { border-bottom: 1px solid #666; margin: 0; padding: 0; height: 34px; z-index: 1; } ul.tabs li { display: block; float: left; border: 1px solid #666; background: #eee; padding: 10px 10px; height: 35px; margin-left: 10px; width: 150px; z-index: 2; font-size: 13px; font-weight: bold; cursor: pointer; border-top-left-radius: 3px; border-top-right-radius: 3px; box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.1); color: #666; } ul.tabs li.selected { background: #fff; border-bottom: 1px solid #fff; box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.3); color: #000; } ul.tabs li .content { /* This has a slight delay on it. */ -webkit-transition: left 3s 0.5s, width 3s 0.5s; -moz-transition: left 3s 0.5s, width 3s 0.5s; transition: left 3s 0.5s, width 3s 0.5s; } ul.tabs li:hover { color: #000; box-shadow: 0px -3px 3px 0px rgba(0,0,0,0.3); } ul.tabs li:hover .content { left: -80%; }