我可以动态隐藏html字符基于换行吗？ [英] Can I dynamically hide html characters based on the line wrap?
问题描述
我有几行数据（例如名称，地址，电话号码，电子邮件地址），因为它们占据了网页的页脚较薄。
I have several data (say a name, an address, a telephone number, an e-mail address) in a row, because they occupy the thin footer of a webpage.
它们由空格 - 空格构造分隔，如下（但居中）：
They are separated by a space-dash-space construct, like this (but centered):
Name - address - phone - mail address
在小屏幕上，整个页面较小，我已经使用不间断的空间和字包装，以确保一切都到位，但结果不令人满意。
On small screens, the whole page is smaller and the text wraps. I'm already making use of no-breaking spaces and word wraps to ensure that everything falls in place but the result is not satisfying.
我得到的是：
Name - address -
phone - mail
我想要的是：
Name - address
phone - mail
使用CSS或JS有什么办法动态隐藏一些字符发生在行的开始或结束位置？
如果没有，请随时提出不涉及更改文本的原始格式。如果我找不到解决方案，我会选择：
If not, feel free to suggest different solutions that don't involve changing the original formatting of the text. Shall I find no solution, I will opt for:
- Name -- address -- phone -- mail -
变成：
- Name -- address -
- phone -- mail -
像这样。
推荐答案
没有办法用纯CSS做到这一点，除非你想只是在某些屏幕尺寸 - 将列表设置为垂直堆叠，并从文档中动态删除 - 。
There is no way to do this with pure CSS, unless you want to just--at certain screen sizes--set the list to stack vertically and remove the - from the document dynamically.
使用Javascript，这是可能的，但我想出的解决方案可能是相当昂贵的，如果在一个页面上使用了很多，或者如果屏幕调整了很多，它可以在复杂布局上触发相当广泛的重绘。
With Javascript, it's possible, but the solution I came up with can be pretty expensive if used a lot on a page, or if the screen is resized a lot, as it can trigger fairly extensive repainting on complex layouts.
首先， ，例如Name，Address，Phone等，必须是一个inline-block元素，并且它旁边的 - 是 :: after 伪元素。然后，您可以浏览每个 inline-block 元素，当您发现一个在页面上的垂直位置低于其前面的垂直位置时，您将设置 [其伪元素之前的一个] 到 display：none ，并在页面调整大小重置。
First off, each of those elements, like "Name", "Address", "Phone", etc., would have to be an inline-block element, and the - character next to it would have to be an ::after pseudo-element. Then, you could go through each of those inline-block elements, and when you find one that has a vertical position on the page lower than the one before it, you would set [the one before its pseudo-element] to display: none and reset on page resize.
<div>
<ul class='tacky'>
<li>Name</li>
<li>Address</li>
<li>Email</li>
<li>Phone</li>
</ul>
</div>
Javascript
a href =https://jquery.com/ =nofollow> 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更轻量级。
CSS
The CSS is here so we can make the Javascript a little more lightweight.
.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 Solution
For this, you'd just pick a screen size (or series of screen sizes) under which the menu doesn't have tacks anymore. This isn't quite as dynamic, but is a compromise that uses all 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;
}
}
这篇关于我可以动态隐藏html字符基于换行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
