white-space-collapse 浏览器什么时候才能支持

本文探讨了未实现的 CSS white-space-collapse 属性及其作用,该属性可以用来设置或检索对象内的空格字符处理方式。尽管该提案未能获得广泛支持,但了解其功能对于前端开发者来说仍然有价值。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

早在 2007 年就有人向 w3 组织提交了css 草案 white-space-collapse 。不过一直没有得到实现,而且各大浏览器貌似也不想实现。先看下 white-space-collapse 的作用吧

white-space-collapse 用于设置或者检索对象内包含的空格字符,属性有:

  • collapse 使用一个单一的字符序列呈现空白(或在某些情况下,没有字符)。
  • preserve 呈现所有的空白,换行符将被保留
  • preserve-breaks 抛弃所有空白,但保留空白
  • discard 抛弃所有空白

也就是说 如果采用了 white-space-collapse:discard;那么下面的代码

<span>字</span>
<span>符中间有空白</span>

 而现在由于没有实现white-space-collapse,我们可能要用很多方法来解决中间出现空白的问题,其中最简单也是最繁琐的方法是,手工去掉空白

<span>字</span><span>符中间没有空白</span>

这种方法很繁琐,但是没有副作用。

各大浏览器要实现这个的话,想想问题还真多,比如直接的空白符号和转义 &nbsp; 这种2种写法应该是有不同处理的,很可能影响太大了。

 

 

<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">所有栏目…</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、付费专栏及课程。

余额充值