我可以根据换行动态隐藏 html 字符吗?

Can I dynamically hide html characters based on the line wrap?

本文关键字：html 字符 隐藏 动态 换行 我可以      更新时间：2023-09-26

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

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

Name - address - phone - mail address

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

我得到的是：

Name - address -
  phone - mail

我想要的是：

Name - address
 phone - mail

对于CSS或JS，如果某些字符恰好位于行的开头或结尾，有什么方法可以动态隐藏它们？

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

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

变成：

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

或类似的东西。

当然有点

晚了：）但我认为纯 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>

也许在

破折号之间的<span>元素上添加一个 CSS 类，如下所示： 

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

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

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

纯 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>

爪哇语

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

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

我认为你不能直接做到这一点，但这里有一个可能适合你的技巧：

如果文本text-align: left则可以强制在-符号之前发生中断，然后执行视觉剪辑（overflow: hidden）以隐藏每行最左侧的一两个字符。

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

因此，每行的开头确实有"-"符号，但您看不到它，因为内部div 向左移动了两个字符，外部剪辑。

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

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

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

相关文章：