Question

我有一个带有日期列的表。每个日期看起来像

2011年6月8日星期三

当浏览器窗口的宽度太窄时，我想只显示没有星期几的日期以节省水平空间。喜欢这个

08.06.2011

理想的解决方案是允许像

这样的标记

<div class="weekday">Wednesday, </div><div class="date">08.06.2011</div>

并且完全基于CSS而不涉及JavaScript。但如果不可能，我可以使用基于JavaScript的解决方案。

Answer 1

你需要一些脚本。 CSS无法根据某些元素的属性（如width）执行操作。只需在脚本的头部添加简单的javascript命令，例如在jQuery中：

$(document).ready(function () {
    if ($(window).width() < 1024) 
        $('body').addClass('too-narrow');
});

然后在CSS中休息。

编辑：

实际上，如果您真的需要它，可以使用CSS解决方案。

.row { height: 30px; background: red; color: white; overflow: hidden; }
.row120 { width: 120px; }
.row200 { width: 200px; }
.row .other { height: 30px; float: left; }
.row .date,
.row .weekday { height: 30px; float: right; }

<div class="row row120">
    <div class="other">Tilte</div>
    <div class="date">18.04.2010</div>
    <div class="weekday">Wednesday</div>
</div>
<div class="row row200">
    <div class="other">Tilte</div>
    <div class="date">18.04.2010</div>
    <div class="weekday">Wednesday</div>
</div>

您需要为行div和其他/日期/工作日div设置高度。将这两个设置为向右浮动，将所有其他（早期）字段设置为向左浮动。在Chrome上为我工作（显示标题18.04.2010），不确定其他人。

Answer 2

您可以“查询”用户将其分辨率设置为的内容。举个例子，看看这个： http://www.javascripter.net/faq/browserw.htm

我不确定“太小”在您的应用程序中意味着什么，因为它取决于很多东西（字体大小等），但如果您可以确定浏览器窗口大小何时太小，您可以然后设置JavaScript以隐藏div #weekday。

Answer 3

此解决方案需要javascript。以下是对HTML的修改，以在显示器周围包含容器。容器中可以有更多容器，但为了简单起见，我只会在其中显示日期。

<div id="container">
    <div id="daydisplay" class="weekday">
        Wednesday
    </div>
    <div class="date">
        08.06.2011
    </div>
</div>

现在您可以使用任何JavaScript库来获取视口的宽度。 YUI和JQuery都有这些功能，所以由于这很容易，我假设我们有一个名为widthOfScreen的变量，它保存视口的宽度。我还假设我们有一个名为left的变量，它保存了此显示所在左侧的像素数。

var container = document.getElementById('container'),
containerWidth = container.clientWidth || container.scrollWidth;

if (containerWidth + x > widthOfScreen) {
   document.getElementById('daydisplay').style.display = 'none';
}

这应该可以解决问题。

Answer 4

这是一个非常丑陋的解决方案，但如果你想让整个单词消失，那么没有比使用overflow: hidden更好的CSS技术了。

我稍微修改了你的标记......也许你可以想出更好的东西，但希望这能为你指出一个纯CSS解决方案的正确方向：

<div class="date">
    <span>08.06.2011</span>
    <span class="weekday">Wednesday</span>
</div>

CSS：

div {
    background: #ccc;
    height: 18px;
    margin: 0 0 5px;
    overflow: hidden; }
span { float: right; }
span.weekday { 
    float: left;
    padding: 0 4px; }

请参阅：http://jsfiddle.net/EQTBa/

Answer 5

对窄窗口使用媒体查询，然后在其中将工作日类定义为display：none。

Answer 6

flex是魔术：

https://codepen.io/rwaness/pen/abZKXNj（第4种情况）

.row {
    display: flex;
    flex-wrap: no-wrap;
    height: 30px;
    max-width: 200px;
    margin-top: 10px;
    padding: 5px;
    background: #bcbcbc;
}
.col {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 5px;
    border: 1px solid #9C9C9C;
    border-radius: 3px;
    overflow: hidden;
    font-size: 20px;
    line-height: 20px;
    cursor: pointer;
}
.col + .col {
    margin-left: 5px;
}
.col.full {
    flex: 1;
}
.col.reverse {
    flex-wrap: wrap-reverse;
    align-content: flex-end;
}

<div class="row">
    <div class="col">
        <span>?</span>
    </div>
    <div class="col full reverse">
        <span>Wednesday</span>
        <span>08.06.2011</span>
    </div>
</div>

仅在有足够空间时显示div，如果没有则隐藏它

6 个答案: