javascript实现一个浮动展示功能 

<html>
<head>
<meta charset="utf-8">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<style type="text/css">
.testTips {
         width: 540px;
         height: 21px;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
         display:inline-block;
     }
</style>
<script type="text/javascript">
$(document).ready(function() {
    $("#testTips").html("浮动显示。。。。。。的非官方单号发给江湖怪咖大范甘迪返回就和规范会计和房管局和木兰花慢");
    $("#testTips").prop("title", "浮动显示。。。。。。的非官方单号发给江湖怪咖大范甘迪返回就和规范会计和房管局和木兰花慢");
});
</script>
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<span class="tips testTips" id = "testTips"></span>

</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> // 在公网上引用jQuery
width: 540px; height: 21px; // 指定长宽
text-overflow 有两种ellipsis （文本超出省略哈显示） clip（非省略哈显示）
值描述
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。 
 
white-space 属性设置如何处理元素内的空白。

可能的值

值描述
normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

 

overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。
值描述
visible 不裁剪内容，可能会显示在内容框之外。
hidden 裁剪内容 - 不提供滚动机制。
scroll 裁剪内容 - 提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。
no-display 如果内容不适合内容框，则删除整个框。
no-content 如果内容不适合内容框，则隐藏整个内容。

overflow-x:hidden;
overflow-y:hidden;

display:inline-block;行内块元素 其他值
值描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。 
 
 
posted @ 2021-09-02 10:32  朱元叹  阅读(440)  评论(0)    收藏  举报