Question

＆＃13;

.month-days-wrapper {
  display: inline-block;
}

.day-wrapper {
  float: left;
}

.day-header {
  font-weight: 400;
  border: 1px solid #dcdcdc;
  text-align: center;
  vertical-align: middle;
  width: 34px;
  height: 26px;
}

.day-weekday {
  background-color: #ededee;
}

.day-weekend {
  background-color: #e3e3e3;
}

.day-body {
  border: 1px solid #dcdcdc;
  text-align: center;
  vertical-align: middle;
  width: 34px;
  height: 50px;
}

.end-ellipsis {
  margin-left: 3px;
  color: #ffffff;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

＆＃13;

<div class="month-days-wrapper">

    
<div class="day-wrapper">
<div class="day-header day-weekday">We</div>
<div class="day-body">
<div class="day-body-day">25</div>
<div style="z-index: 1; position: relative; left: 21px; top: 5px; width: 174px; height: 20px; background-color: green; border-radius: 5px" onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
<div class="end-ellipsis">Tom Jones - $4,000</div>
</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Th</div>
<div class="day-body">
<div class="day-body-day">26</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Fr</div>
<div class="day-body">
<div class="day-body-day">27</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Sa</div>
<div class="day-body">
<div class="day-body-day">28</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekend">Su</div>
<div class="day-body">
<div class="day-body-day">29</div>
</div>
</div>
<div class="day-wrapper">
<div class="day-header day-weekday">Mo</div>
<div class="day-body">
<div class="day-body-day">30</div>
</div>
</div>


</div>

＆＃13;

水平挤压结果，您会看到日期响应。（完全忽略绿线，因为服务器端编码会照顾它。）

挑战在于使文本“汤姆琼斯 - 4,000美元”也做出回应。

这可以通过CSS和JS来完成吗？

编辑请看一下这张图片，因为它有望解释我的内容。

More Detailed Image http://d29u7d0naxols0.cloudfront.net/TextFlowsWithDays.jpg

更多编辑。

背景：这是预订应用的月线日历，当其容器缩小时，其日期会移至第二行，第三行等。这非常有效。

网页上显示了12个月一次。

预订酒店时，日历需要显示名称和$ Amount，开始在第一天预订。当日历缩小并且一天进入下一行时，文本必须跟踪日期，如上图所示。

边界条件

预订可能是一晚或100晚。
如果短期预订和所有文字都无法安装，请用省略号完成。
文本必须跨越月边界。例如，预订从11月30日开始，所以文字必须流向12月1日等。

如果有人可以这样做，那么我将支付约定的金额，否则我会去Freelancer.com。（我在这里提供$ s，因为人们已经做出了努力，如果他们能够将货物带回家并且应该得到奖励，那就应该得到回报。）

干杯

Answer 1

您不需要js，可以在font-size

上使用文本的可缩放值

vh是高度的百分比
font-size:2vh

vw是宽度的百分比
font-size:2vw

vmin是较短者的百分比（对移动用途有用）
font-size:2vmin

vmax是较长的一个的百分比 font-size:2vmax

Answer 2

很难确切地了解到你的目标，但这里有几点想法。

在原始代码中，绿色背景预订信息是其开始日期的div的一部分。只要您以这种方式执行操作，当您调整屏幕大小时，它将无法正确缩放。

考虑到这一点，这里有一个修改后的代码，它将预订信息移动到日期容器的末尾，在调整页面大小时将其保留在那里。

</head>
<body>
    <div class="month-days-wrapper">
        <div class="day-wrapper">
            <div class="day-header day-weekday">We
            </div>
            <div class="day-body">
                <div class="day-body-day">25
                </div>
            </div>
        </div>
        <div class="day-wrapper">
            <div class="day-header day-weekday">Th
            </div>
            <div class="day-body">
                <div class="day-body-day">26
                </div>
            </div>
        </div>
        <div class="day-wrapper">
            <div class="day-header day-weekday">Fr
            </div>
            <div class="day-body">
                <div class="day-body-day">27
                </div>
            </div>
        </div>
        <div class="day-wrapper">
        <div class="day-header day-weekend">Sa
        </div>
            <div class="day-body">
                <div class="day-body-day">28
                </div>
            </div>
        </div>
        <div class="day-wrapper">
            <div class="day-header day-weekend">Su
            </div>
            <div class="day-body">
                <div class="day-body-day">29
                </div>
            </div>
        </div>
        <div class="day-wrapper">
            <div class="day-header day-weekday">Mo
            </div>
            <div class="day-body">
                <div class="day-body-day">30
                </div>
            </div>
        </div>
    <div class='text-container' onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');">
        <div class="end-ellipsis">Tom Jones - $4,000
        </div>
    </div>
    </div>
    </div>
</body>
</html>


.month-days-wrapper {
  display: inline-block;
  position: relative;
}

.day-wrapper {
  float: left;
}

和CSS：

.day-header {
  font-weight: 400;
  border: 1px solid #dcdcdc;
  text-align: center;
  vertical-align: middle;
  width: 34px;
  height: 26px;
}

.day-weekday {
  background-color: #ededee;
}

.day-weekend {
  background-color: #e3e3e3;
}

.day-body {
  border: 1px solid #dcdcdc;
  text-align: center;
  vertical-align: middle;
  width: 34px;
  height: 50px;
}

.end-ellipsis {
  margin-left: 3px;
  color: #ffffff;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.text-container {
    z-index: 10; 
    position: absolute;
    left: 21px; 
    bottom: 5px; 
    width: 174px; 
    height: 20px; 
    left: 50%;
    margin-left: -87px;
    background-color: green; 
    border-radius: 5px;
}

然而，作为一个相关点，这是一个更大的应用程序的一部分（看起来它可能与某种预订系统有关），你可能想要考虑动态设置日期div的背景颜色而不是放置这覆盖在他们身上。这将不那么挑剔。只是一个想法。

祝你好运，欢迎来到Stack Overflow！

Answer 3

有点棘手，但我认为这就是你所需要的JSfiddle
将单词拆分为多个容器，然后给它们display:inline-block

Answer 4

也许你会用line-height尝试一个技巧，然后使用额外的span容器（或子div本身），position:absolute和word-wrap / word-break：

.end-ellipsis课程已删除。

从width移除测试.month-days-wrapper以测试调整大小或使用http://codepen.io/anon/pen/dYBypL进行测试。

.month-days-wrapper {
  display: inline-block;
  width: 160px;
  position: relative;
}

.day-wrapper {
  float: left;
}

.day-header {
  font-weight: 400;
  border: 1px solid #dcdcdc;
  text-align: center;
  vertical-align: middle;
  width: 34px;
  height: 26px;
}

.day-weekday {
  background-color: #ededee;
}

.day-weekend {
  background-color: #e3e3e3;
}

.day-body {
  border: 1px solid #dcdcdc;
  text-align: center;
  vertical-align: middle;
  width: 34px;
  height: 50px;
}

.end-ellipsis {
  margin-left: 3px;
  color: #ffffff;
  vertical-align: middle;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.brlines {
  z-index: 1;
  position: absolute;
  max-width: 100%;
  text-align: left;
  margin-top: -1.6em;
  text-indent: 1em;
  word-wrap: break-word;
  word-break: break-all
}

.brlines span {
  display: inline;
  word-wrap: break-word;
  word-break: break-all;
  line-height: 5em;
  background-color: green;
  border-radius: 5px;
  padding: 0 1em;
}

<div class="month-days-wrapper">
  <div class="day-wrapper">
    <div class="day-header day-weekday">We</div>
    <div class="day-body">
      <div class="day-body-day">25</div>
      <div class="brlines">
        <div onmouseout="hidePopup();" onmousemove="showPopup(event, this, 'Owner', 'Booking', '0', '0');"><span>Tom Jones - $4,000</span>
        </div>
      </div>
    </div>
  </div>
  <div class="day-wrapper">
    <div class="day-header day-weekday">Th</div>
    <div class="day-body">
      <div class="day-body-day">26</div>
    </div>
  </div>
  <div class="day-wrapper">
    <div class="day-header day-weekday">Fr</div>
    <div class="day-body">
      <div class="day-body-day">27</div>
    </div>
  </div>
  <div class="day-wrapper">
    <div class="day-header day-weekend">Sa</div>
    <div class="day-body">
      <div class="day-body-day">28</div>
    </div>
  </div>
  <div class="day-wrapper">
    <div class="day-header day-weekend">Su</div>
    <div class="day-body">
      <div class="day-body-day">29</div>
    </div>
  </div>
  <div class="day-wrapper">
    <div class="day-header day-weekday">Mo</div>
    <div class="day-body">
      <div class="day-body-day">30</div>
    </div>
  </div>
</div>

如何制作自适应文字

4 个答案: