我连续有几个数据（比如姓名，地址，电话号码，电子邮件地址），因为它们占据了网页的薄页脚。
它们由space-dash-space结构分隔，就像这样（但是居中）：
Name - address - phone - mail address
在小屏幕上，整个页面较小，文字包裹。我已经在利用不间断的空间和自动换行来确保一切都落实到位，但结果并不令人满意。
我得到的是：
Name - address -
phone - mail
我想要的是：
Name - address
phone - mail
如果有些字符恰好位于一行的开头或结尾，有没有办法用CSS或JS动态隐藏某些字符？
如果没有，请随意提出不涉及更改文本原始格式的不同解决方案。我找不到解决办法，我会选择：
- Name -- address -- phone -- mail -
变成：
- Name -- address -
- phone -- mail -
或类似的东西。
答案 0 :(得分：2)
也许在破折号之间的<span>元素上添加一个CSS类，如下所示：
Name - address <span class="toHideOnMobile"> - </span> phone - mail address
然后将CSS用于这样的小型设备：
@media (max-width: 767px){
.toHideOnMobile { display: none; }
}
答案 1 :(得分：2)
当然有些晚了：），但是我认为纯CSS解决方案可能存在。请参见下面的代码片段。
问题在于，列表项（第一个除外）在左侧具有负边距，在右侧具有相同的正边距。结果，这些边距消失了，但在第二行和其他行上产生了负的缩进。并且容器的“溢出：隐藏”；隐藏左侧的多余分隔符。在此重要的是，分隔线应具有固定的宽度。
ul {
list-style: none;
padding: 0;
overflow: hidden;
}
li {
display: inline;
white-space: nowrap;
margin-right: 0.66em;
margin-left: -0.66em;
}
li::before {
display: inline-block;
content: "-";
width: 0.66em;
}
li:first-child {
margin-left: 0;
}
li:first-child::before {
content: none;
}<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
</ul>
答案 2 :(得分：1)
如果您知道要拆分的内容。您可以通过更改CSS显示属性来使用选择下一行的内容，并使用CSS内容属性根据显示的大小添加和删除短划线。
<style>
p > span {display: inline-block;}
p > span:after{ content: " -";}
p > span:last-of-type:after {content: "";}
@media (max-width: 500px){
p > span.street {display: block;}
p > span.street:after{ content: "";}
}
@media (max-width: 300px){
p > span {display: block;}
p > span:after{ content: "";}
}
</style>
<p>
<span class="street">1600 Pennsylvannia Ave.</span>
<span>Washington</span>
<span>DC</span>
<span>1-555-555-5555</span>
</p>
这是一个小提琴：https://jsfiddle.net/ae9j994j/4/
答案 3 :(得分：1)
使用纯CSS无法做到这一点，除非您只想 - 在某些屏幕尺寸下 - 将列表设置为垂直堆叠并动态从文档中删除-。
使用Javascript，它是可能的，但如果在页面上大量使用，或者如果屏幕调整大量，我提出的解决方案可能相当昂贵，因为它可以触发相当广泛的重新绘制复杂布局。
首先，每个元素，如＆＃34; Name＆＃34;，＆＃34; Address＆＃34;，＆＃34; Phone＆＃34;等等，必须是内联块元素，它旁边的-字符必须是::after伪元素。然后，您可以浏览每个inline-block元素，当您发现页面上的垂直位置低于之前的位置时，您可以将[the one before its pseudo-element]设置为display: none并在页面上重置调整大小。
<div>
<ul class='tacky'>
<li>Name</li>
<li>Address</li>
<li>Email</li>
<li>Phone</li>
</ul>
</div>
需要jQuery
handleList = function(c, e){
var last;
var lastHeight;
$("li", e).each(function(count, listItem){
var height = $(listItem).offset().top;
if(typeof last !== 'undefined'){
if(lastHeight < height){
$(last).addClass("no-tack");
}else{
$(last).removeClass("no-tack");
}
}
last = listItem;
lastHeight = height;
});
};
// jQuery event bindings for load
// and resize
$(document).ready(function(){
$(".tacky").each(handleList);
});
$(window).resize(function(){
$(".tacky").each(handleList);
});
CSS就在这里，所以我们可以使Javascript更轻量级。
.tacky
{
margin: 0;
padding: 0;
list-style-type: none;
}
.tacky li
{
display: inline-block;
}
// add tack as a psuedo element
.tacky li:after
{
content: "-";
margin: 0 5px;
}
.tacky li:last-of-type:after
{
content: "";
margin: 0;
}
.tacky li.no-tack:after
{
content: "";
margin: 0;
display: none;
}
为此，您只需选择一个屏幕尺寸（或一系列屏幕尺寸），在此尺寸下菜单不再具有粘性。这不是动态的，但是使用所有CSS的妥协。
.tacky
{
margin: 0;
padding: 0;
list-style-type: none;
}
.tacky li
{
display: inline-block;
}
.tacky li:not(:last-of-type):after
{
content: "-";
padding: 0 5px;
}
// Media selector to hide tack characters.
//
// 768 is the max screen width this will
// be visible on.
@media (max-width: 768px){
.tacky li:after
{
display: none;
}
}
答案 4 :(得分：1)
我认为你不能直接这样做，但这里有一个可能适合你的技巧：
如果您的文字为text-align: left，则可以在-符号前强制执行中断，然后执行可视剪辑（overflow: hidden）以隐藏最左边的一个或两个每一行。
演示：https://jsfiddle.net/h4t96hav/
所以在每一行的开头都有“ - ”符号，但你看不到它，因为内部div向左移动了两个字符和外部剪辑。
使用可变宽度字体可能需要一点点捏造，但我认为有一个合适的误差范围（因为有空间）。
请注意，我将块设置为display: inline-block，因此数据的左侧不会发生包裹。
类似的技巧当然可以用于text-align: right，但我想不出处理居中文本的方法。