如果有足够的空间，显示一个div；如果没有足够的空间，则隐藏它。

Question

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

Wednesday, 08.06.2011

当浏览器窗口宽度太窄时，我想只显示日期而不显示星期几，以节省水平空间。像这样：

08.06.2011

理想的解决方案将允许使用以下标记：

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

并且完全基于CSS而不涉及JavaScript。但如果这不是可能的，我可以接受一个基于JavaScript的解决方案。

- Paul

Answer 1

您需要在这里添加一些脚本。CSS无法根据某个元素的属性（如宽度）执行操作。 只需在脚本头部添加简单的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），不确定其他浏览器。

- Tomasz Durka

---

那几乎是完美的。如果日期靠左对齐而星期几不可见，它就会完美无缺。 - Paul

正如您所看到的，它们都向右浮动，因此星期几是最后一个子元素，将“掉下来”。如果它们都向左浮动，则日期将下降。因此，要么选择右浮动，要么交换它们的位置。 - Tomasz Durka

Answer 2

使用媒体查询来针对窄屏幕，然后在其中将工作日类定义为display:none。

- user663031

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';
}

那应该就可以了。

- Zoidberg

---

一个理想的解决方案不应该依赖于预设的浏览器宽度，而是让一周中的某一天消失，如果表格变得太窄，需要水平滚动才能看到一行的所有元素。我没有找到一个简洁的实现方法，但如果你去amazon.com并改变你的浏览器窗口的宽度，显示为“考虑的项目”和“查看的项目”的数量会相应地调整。我希望有一个类似的行为，但我只需要它用于一个单独的div。 - Paul

这很简单，只需要编写一个监听窗口调整大小的函数，然后进行相应的调整即可。我想可能是window.onresize或类似的东西。 - Zoidberg

Answer 4

您可以“查询”用户的分辨率设置。例如，请查看以下内容： http://www.javascripter.net/faq/browserw.htm

我不确定您的应用程序中“太小”的含义，因为它取决于许多因素（字体大小等），但是如果您可以确定浏览器窗口大小太小，那么您可以设置JavaScript来隐藏#weekday div。

- Gregory A Beamer

Answer 5

Flex真是神奇：

https://codepen.io/rwaness/pen/abZKXNj（第四个案例）

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

- erwan oger

Answer 6

这是一个相当丑陋的解决方案，但如果你想要让整个单词消失，那么没有比使用 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/

- Wex

---

这将会裁剪 div。当宽度过窄时不会完全隐藏它。 - Tomasz Durka

实际上，当你使用浮点数时，这给了我一个想法。 - Tomasz Durka

我想我应该发布我的fiddle中的CSS，这基本上就是我正在做的事情。 - Wex