验证中...
码云 Gitee IDE 全新上线——支持 Git 管理的轻量在线编码环境
语言: CSS
分类: CSS 技巧
最后更新于 2018-02-14 11:46
片段 1 片段 2 片段 3 片段 4 片段 5
中文对齐
原始数据 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.x {
width: 4em;
border: 1px solid red;
/* 下面 3 行实现对齐效果 */
line-height: 20px;
height: 20px;
text-align: justify;
/* overflow: hidden; */
}
.x::after {
/* 下面 3 行实现对齐效果 */
content: '';
display: inline-block;
width: 100%;
}
</style>
</head>
<body>
<div class="x">姓名</div>
<div class="x">联系方式</div>
</body>
</html>
nav
原始数据 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
ul {
margin: 0; padding: 0; list-style: none;
border: 1px solid green;
}
ul > li {
float: left;
border: 1px solid red;
}
.clearfix::after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class="clearfix">
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
<li>选项5</li>
<li>选项6</li>
</ul>
</body>
</html>
单行文本溢出省略
原始数据 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div {
border: 1px solid red;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
lorem lorem lorem loremlorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem loremlorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem loremlorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem loremlorem lorem lorem lorem lorem lorem lorem
</div>
</body>
</html>
多行文本溢出省略
原始数据 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div {
border: 1px solid red;
overflow: hidden;
/* webkit */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
lorem lorem lorem lorem lorem lorem lorem lorem lorem <br>
lorem lorem lorem lorem lorem lorem lorem lorem lorem <br>
lorem lorem lorem lorem lorem lorem lorem lorem lorem <br>
lorem lorem lorem lorem lorem lorem lorem lorem lorem <br>
</div>
</body>
</html>
文本垂直居中
原始数据 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div {
border: 1px solid red;
/* 24px 和大多数字体的行高比较接近 */
line-height: 24px;
padding: 8px 0;
text-align: center;
}
</style>
</head>
<body>
<div>
lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem
lorem lorem lorem lorem lorem lorem lorem lorem lorem
</div>
</body>
</html>

评论列表( 0 )

你可以在登录后,发表评论

搜索帮助