我有几个连续的数据(比如姓名、地址、电话号码、电子邮件地址),因为它们占据了网页的薄页脚。
它们由空格-破折号-空格结构分隔,如下所示(但居中):
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>
关于javascript - 我可以根据换行动态隐藏 html 字符吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35850916/