Skip to content

Instantly share code, notes, and snippets.

@aneasystone

aneasystone/white-space-test.html

Last active January 13, 2018 09:31
Show Gist options
  • Save aneasystone/8e02ecd5fbe5beec9299a39982953274 to your computer and use it in GitHub Desktop.
Save aneasystone/8e02ecd5fbe5beec9299a39982953274 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
white-space-test.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.container {
width: 340px;
background: #fff;
border: 1px solid #37c249;
}
.container ul {
list-style: none;
padding: 0 5px;
margin: 0 0;
}
.container ul li {
border-bottom: 1px dashed #e7e7e7;
height: 30px;
line-height: 30px;
white-space: nowrap;
}
.container ul li:hover {
color: #fff !important;
cursor: pointer;
background-color: #37c249 !important;
}
.container ul li span.l {
float: left;
}
.container ul li span.r {
float: right;
}
.container ul li i {
float: right;
width: 16px;
height: 30px;
background-image: url(http://icons.iconarchive.com/icons/osiris/world-flags/16/00-cctld-ac-icon.png);
background-position: center;
background-repeat: no-repeat;
}
.wrap {
width: 200px;
}
.wrap p {
white-space: nowrap;
}
</style>
</head>
<body>
<div class='container'>
<ul>
<li>
<span class='l'>中国</span>
<span class='r'>China</span>
</li>
<li><span class='l'>中国香港</span><span class='r'>Hongkong,China</span></li>
<li><span class='l'>中国澳门</span><span class='r'>Macao,China</span></li>
<li><span class='l'>中国台湾</span><span class='r'>Taiwan,China</span></li>
<li><span class='l'>美国</span><span class='r'>United States of America</span></li>
<li><span class='l'>英国</span><span class='r'>United Kingdom</span></li>
<li><span class='l'>日本</span><span class='r'>Japan</span></li>
<li><span class='l'>加拿大</span><span class='r'>Canada</span></li>
<li><span class='l'>法国</span><span class='r'>France</span></li>
<li><span class='l'>韩国</span><span class='r'>Korea</span></li>
<li><span class='l'>德国</span><span class='r'>Germany</span></li>
<li>英国<i></i></li>
</ul>
</div>
<div class='wrap'>
<p>Hello world, this is a test for wrapping.</p>
<p>Hello world,
this is a test for wrapping.</p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment