我可以根据换行动态隐藏 html 字符吗？答案

【问题标题】：Can I dynamically hide html characters based on the line wrap?我可以根据换行动态隐藏 html 字符吗？
【发布时间】：2016-06-21 10:14:39
【问题描述】：

我连续有几个数据（比如姓名、地址、电话号码、电子邮件地址），因为它们占据了网页的薄页脚。

它们由空格-破折号-空格结构分隔，如下所示（但居中）：

Name - address - phone - mail address

在小屏幕上，整个页面更小并且文本换行。我已经在使用不间断空格和自动换行来确保一切到位，但结果并不令人满意。

我得到的是：

Name - address -
  phone - mail

我想要的是：

Name - address
 phone - mail

如果某些字符恰好位于行首或行尾，有没有办法通过 CSS 或 JS 动态隐藏它们？

如果没有，请随时提出不涉及更改文本原始格式的不同解决方案。如果我找不到解决方案，我会选择：

- Name -- address -- phone -- mail -

变成：

- Name -- address -
 - phone -- mail -

或类似的东西。

【问题讨论】：

CSS 无法做到这一点。使用 Javascript，它可能，如果非常棘手的话。首先，这些元素中的每一个，例如“姓名”、“地址”、“电话”等，都必须是 inline-block 元素，并且它旁边的 - 字符必须是 @987654329 @伪元素。然后，您可以遍历每个 inline-block 元素，当您发现页面上的垂直位置低于之前的元素时，您可以将 [the one before its pseudo-element] 设置为 display: none 并在页面调整大小时重置
这就是我们需要:nth-line()选择器的原因。
@Zachiel 看看这个 jsFiddle：jsfiddle.net/cy7a7kho 这是你要找的吗？这几乎正是我所说的。我给出的唯一警告是这种解决方案有点昂贵，因为每次调整窗口大小时都会执行它。话虽如此，用户在 prod 设置中真正调整了多少次窗口？
@Aeolingamenfel 感谢您的警告。
如果你想要一个纯 CSS 的解决方案，很多网站，在一定的屏幕宽度下，都会做这样的垂直菜单。 IE，您执行与我在上面建议的 inline-block 相同的操作，然后将其切换为 display: block 并使用 CSS @media 查询隐藏特定屏幕宽度以下的所有伪元素。

标签： javascript html css formatting

【解决方案1】：

当然有点晚了:) 但我认为纯 CSS 解决方案可能存在。请参阅下面的代码。

重点是列表项（第一个除外）的左侧有 negative 边距，右侧有相同的 positive 边距。结果，这些边距消失在同一行上，但提供了第二行和其他行的负缩进。而容器的“溢出：隐藏；”隐藏左侧的额外分隔符。重要的是分隔线具有固定的宽度。

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】：

也许像这样在破折号之间的<span>元素上添加一个CSS类：

Name - address <span class="toHideOnMobile"> - </span> phone - mail address

然后为这样的小型设备使用 CSS：

@media (max-width: 767px){
    .toHideOnMobile { display: none; }
}

【讨论】：

我知道这一点，但我需要构建几个@media 查询，通过反复试验来使它们正确 - 并希望它们在所有浏览器上都能正常工作。无论如何，这会起作用，所以你有我的支持。

【解决方案3】：

使用纯 CSS 无法做到这一点，除非您只想在某些屏幕尺寸下将列表设置为垂直堆叠并从文档中动态删除 -。

使用 Javascript 是可能的，但如果在页面上大量使用，或者如果屏幕被大量调整大小，我想出的解决方案可能会非常昂贵，因为它可能会在复杂的布局上触发相当广泛的重绘。

Javascript 解决方案

首先，这些元素中的每一个，如“姓名”、“地址”、“电话”等，都必须是内联块元素，并且它旁边的 - 字符必须是::after 伪元素。然后，您可以遍历每个 inline-block 元素，当您找到一个在页面上的垂直位置低于它之前的元素时，您可以将 [the one before its pseudo-element] 设置为 display: none 并在页面调整大小时重置。

HTML

<div>
  <ul class='tacky'>
    <li>Name</li>
    <li>Address</li>
    <li>Email</li>
    <li>Phone</li>
  </ul>
</div>

Javascript

需要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

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 解决方案

为此，您只需选择一个屏幕尺寸（或一系列屏幕尺寸），在该屏幕尺寸下，菜单不再有大头针。这不是动态的，而是使用所有 CSS 的折衷方案。

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】：

如果你知道你想让它分裂什么。您可以通过更改 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/

【讨论】：

【解决方案5】：

我认为您不能直接执行此操作，但这里有一个可能对您有用的技巧：

如果您的文本是 text-align: left，您可以强制在 - 符号之前发生中断，然后执行可视剪辑 (overflow: hidden) 以隐藏每行最左边的一个或两个字符。

演示：https://jsfiddle.net/h4t96hav/

所以每行的开头都有“-”符号，但你看不到它，因为内部 div 向左移动了两个字符和外部剪辑。

要让它与可变宽度字体一起工作需要一点点捏造，但我认为有一个不错的错误余地（因为有空格）。

请注意，我将块设置为 display: inline-block，因此不会在数字左侧发生换行。

text-align: right 当然可以使用类似的技巧，但我想不出处理居中文本的方法。

【讨论】：