您的位置：首页 > Web前端 > CSS

css零零散散的笔记

2017-05-04 16:30 274 查看

1.div根据内容自适应大小

效果图：

html：

<body>
<div class="parent">
<div class="children">欢迎来到蚂蚁部落，今天阳光不错！</div>
</div>
</body>

css：

<style media="screen">
.parent {
width: 400px;
height: 400px;
border: 1px solid red;
}

.children {
border: 1px solid blue;
display: inline;
zoom: 1;
}
</style>

2.文本显示指定长度的汉字，超过部分用......代替(css和js两种实现方法)

效果图：

图中只有第一行的是用css实现的，后面的都是用js实现的。

html:

<body>
<div class="parent">
<a href="javascript:void(0)" title="今天天气好晴朗 处处好风光 好风光 蝴蝶儿忙 蜜蜂也忙 小鸟儿忙着 白云也忙">
<div class="text-overflow-ellipsis">
今天天气好晴朗 处处好风光 好风光 蝴蝶儿忙 蜜蜂也忙 小鸟儿忙着 白云也忙
</div>
</a>
</div>
<div class="parent_two">
<a href="javascript:void(0)" title="迪丽热巴·迪力木拉提" id='text_two' class="text_two">迪丽热巴·迪力木拉提 </a>
</div>
<div class="parent_three">
<a href="javascript:void(0)" title="迪丽" id='text_three' class="text_three">迪丽</a>
</div>
</body>

css:

<style media="screen">
.text-overflow-ellipsis:hover .text {
display: block;
position: absolute;
border: 1px solid pink;
left: 100px;
top: 50px;
padding: 3px;
}

.text-overflow-ellipsis {
cursor: default;
margin-top: 20px;
width: 300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

a {
text-decoration: none;
color: #000;
}
</style>

js:

<script type="text/javascript">
$(function() {
var text = $('#text_two').html();
if (text.length > 3) {
text = text.substring(0, 3);
$('#text_two').html(text + '...')
}
var text_three = $('#text_three').html();
if (text_three.length > 3) {
text_three = text_three.substring(0, 3);
$('#text_three').html(text_three + '...')
}
});
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航