<li></li>列表中显示文字强制不换行,大于li宽度自动隐藏

li{

display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap;     //强制不换行
overflow:hidden;            //自动隐藏文字                                                                             
text-overflow: ellipsis;    //文字隐藏后添加省略号
-o-text-overflow:ellipsis; //适用于opera浏览器
}

涉及关键属性的语法:

1、语法: 
text-overflow : clip | ellipsis 
参数: 
clip :  不显示省略标记(...),而是简单的裁切 
ellipsis :  当对象内文本溢出时显示省略标记(...)

2、
语法: 
overflow : visible | auto | hidden | scroll 
参数: 
visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条

3、
语法: 
white-space : normal | pre | nowrap 
参数: 
normal :  默认处理方式 
pre :  用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象 
nowrap :  强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)

 

来自: http://hi.baidu.com/xiaowuphp/blog/item/0c4bef219181b4a94723e85e.html

 

<body class="bodystyle"> <div id="append_parent"></div> <div id="ajaxwaitid"></div> <div class="page atta"> {include file="seo/bar" /} <div class="seo-right {if condition='2 != $config.seo_pseudo'}none{/if}" id="seo_right_uphtml"> <style> .seo-right{ right: 30px; width: 90%; background-color:#fff; z-index:666666; border-radius: 4px; height: 810px; } .seo-html dt.tit { width: 60px; padding-left:20px; } </style> <style> li { list-style: none; } .box { position: relative; display: inline; left: 150px; } .top { height: 20px; position: relative; margin-bottom:20px; } .top input { width: 100px; height: 20px; font-size: 25px; padding: 0 20px; border: 1px solid #d1ccd0; outline: none; } .top .blue { border: 2px solid #409eff;; } .top .size { width: 16px; height: 16px; position: relative; top: 50%; left: -30px; margin-top: -8px; transform: rotate(180deg); transition: all .5s; color: #d1ccd0; } .top ul { position: absolute; display:flex; font-size: 10px; top: 50%; transform: translateY(-50%); left: 15px; z-index: 99; } .top ul li { border-radius: 5px; display: none; margin-top: 20px; font-size: 14px; } .arr1{ margin-left: 20px; } .list { width: 100%; height: 430px; margin-top: 5px; background-color:#fff; /* 超出隐藏,需要时加滚动条*/ overflow: auto; position: relative; display: block; z-index:99; } /* 隐藏滚动条 */ .list::-webkit-scrollbar { display: none; } .list-ul { width: 100%; } .header{ background-color: #f7f7f7; clear: both; position: relative; z-index: 1; } .header th{ white-space: nowrap; cursor: default; border-right: 2px solid #fff; box-sizing: border-box; line-height: 35px; } .list-ul > span { flex: 0 0 33.33%; box-sizing: border-box; min-width: 300px; } .list ul { display: flex; flex-direction: column; margin: 8px 0; } .list ul li { display: flex; height: 27px; align-items: center; padding: 0 10px; color: #65676b; cursor: pointer; } .list ul li:hover { background-color: #f5f8ff; } .list ul li label { font-size: 10px; margin-left: 15px; display: block; width: 100%; } .fontBlue { color: #0075ff; } #input1{ width: 300px; height: 30px; padding-right: 6px; padding-left: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-bottom: 10px; } #searchInput { width: 136px; height: 20px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; } #path-select,#online-status-select,#domain-type-select{ width: 150px; height: 30px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; margin-bottom:10px; } table { border-collapse: collapse; } tr { border-bottom: 1px solid #f7f7f7; line-height: 48px; } #temp-select, #temp-type-select{ width: 150px; height: 30px; padding-right: 6px; padding-top: 4px; padding-bottom: 4px; border: 1px solid #d1ccd0; border-radius: 4px; font-size: 14px; color: #333; margin-right: 20px; margin-bottom: 10px;; } #queryButton{ min-height: 20px; padding: 5px 15px; font-size: 12px; border-radius: 3px; } .partial-upload{ margin-left: 10px; padding: 7px 19px!important; } </style> <div class="page" style="padding: 0px 15px 30px"> <form method="get" id="html_handlepost" name="form2"> <div class="ncap-form-default seo-html" style="display: relative;padding: 10px 0px 30px;"> <dl class="row" style="margin-top: 0px"> <dt class="tit" style="height: 30px;font-size:18px;display:block;"> <label>全部域名:</label> </dt> <div class="template_input" style="font-size: 16px;position: relative;left:150px;display:inline-block;margin-bottom:27px;"> <em style="color:#F60;font: bold 14px/20px tahoma, verdana;">*</em> <span>提交template资源文件:</span>   <label for="seo_upload_all_yes" class="curpoin"> <input type="radio" id="seo_upload_all_yes" name="seo_upload_all" value="1"> 是 </label> <label for="seo_upload_all_no" class="curpoin"> <input type="radio" id="seo_upload_all_no" name="seo_upload_all" value="0" checked> 否 </label> <a href="javascript:void(0);" id="up_site" class="partial-upload ncap-btn ncap-btn-green" style="margin-left: 90px;">一键生成全部域名并上传到s3</a> </div> <dd class="opt w0" style="position:relative;left:150px;"> <span class="err"></span> <p class="notic"></p> </dd> </dl> <dl class="row" style="border-top: 1px solid rgb(238,238,238);background-color:#fff;padding-top:23px;display:inline-block;width:100%;margin-bottom:20px;"> <dt class="tit" style="height: 30px;font-size:18px;display:block;">部分域名:</dt> <div class="template_input" style="font-size: 16px;position: relative;left:150px;display:inline-block;margin-bottom:30px"> <em style="color:#F60;font: bold 14px/20px tahoma, verdana;">*</em> <span>提交template资源文件:</span>   <label for="seo_upload_yes" class="curpoin"> <input type="radio" id="seo_upload_yes" name="seo_upload" value="1"> 是 </label> <label for="seo_upload_no" class="curpoin"> <input type="radio" id="seo_upload_no" name="seo_upload" value="0" checked> 否 </label> <a href="javascript:void(0);" id="up_article_multiple" class="ncap-btn ncap-btn-green partial-upload" style="margin-left: 90px;">一键生成所选域名并上传到s3</a> <a href="javascript:void(0);" id="down_article_multiple" class="ncap-btn ncap-btn-green partial-upload" style="margin-left: 45px;">一键下线所选域名</a> </div> <div class="top" style="left:150px;margin-bottom:19px;display: inline-block;margin:0px;"> <input type="text" name="" id="input1" style="display:none;"> <input type="text" id="searchInput" placeholder="域名名称"> <select id="path-select"> <option value="0">域名类型</option> <option value="1">一级</option> <option value="2">二级</option> </select> <select id="online-status-select"> <option value="0">是否上线</option> <option value="1">是</option> <option value="2">否</option> </select> <select id="domain-type-select"> <option value="0">域名类型</option> <option value="1">游戏</option> <option value="2">电商</option> <option value="3">资讯 - 金融</option> <option value="4">资讯 - 科技</option> </select> <select id="temp-type-select"> <option value="0">模板类型</option> <option value="1">info</option> <option value="2">game</option> <option value="3">ecommerce</option> </select> <select id="temp-select"> <option value="0">模板名称</option> </select> <button type="button" id="queryButton">查询</button> <ul style="display:none;"> <li class="change"></li> <li class="arr1"></li> </ul> </div> <dd class="opt w0" style="margin: 30px;"> <div class="box hDivBox"> <div class="list hDiv"> <div class="list-ul hDivBox" style=" overflow-x: auto; width:1500px;"> <table class="header" cellpadding="0" cellspacing="0" style="width: 100%;"> <thead> <tr> <th class="sign w50" axis="col0"> <div class="tc"><input type="checkbox" onClick="toggleCheckboxes(this)" autocomplete="off"></div> </th> <th axis="col3" class="w300"> <div class="sundefined tc">域名名称</div> </th> <th axis="col1" class="w100"> <div class="tc">二级域名</div> </th> <th axis="col1" class="w100"> <div class="tc">上线状态</div> </th> <th axis="col1" class="w160"> <div class="tc">多级目录地址</div> </th> <th axis="col2" class="w160"> <div class="tc">域名类型</div> </th> <th axis="col2" class="w160"> <div class="tc">模板类型</div> </th> <th axis="col2" class="w200"> <div class="tc">模板名称</div> </th> <th axis="col1" class="w200"> <div class="tc">创建时间</div> </th> <th axis="col1" class="w200"> <div class="tc">上次修改时间</div> </th> </tr> </thead> </table> <table class="flex-table autoht" cellpadding="0" cellspacing="0" border="0" id="arctype_table" style="width: 100%"> <tbody class="flex-tbody"></tbody> </table> </div> </div> </div> <p class="notic"></p> </dd> </dl> <dl class="row" style="display: none;"> <dt class="tit">栏目页</dt> <dd class="opt w0"> <select name="html_typeid" id="html_typeid" style="width: 150px;"> <option value="0">所有栏目&hellip;</option> {$select_html} </select>  <a href="javascript:void(0);" id="up_channel" class="ncap-btn ncap-btn-green">一键生成</a> <p class="notic"></p> (功能已弃用) </dd> </dl> </div> </form> </div> 这个dd元素已经超出了我的整体范围,导致有一些内容变的不可见了,所以我现在应该怎么办,目前可以实现上下滑动来查看,但是左右滑动实现不了,我不希望使用换的方式来解决 dd class="opt w0" style="margin: 30px;">
08-06
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值