Javascript 如何制作响应性文本_Javascript_Css

Javascript 如何制作响应性文本

javascript css

Javascript 如何制作响应性文本,javascript,css,Javascript,Css,我有一个例子。月日包装器{ 显示：内联块； } .日间包装纸{ 浮动：左； } .日标题{ 字体大小：400；边框：1px实心#DCDC；文本对齐：居中；垂直对齐：中间对齐；宽度：34px；高度：26px； } .工作日{ 背景色：#ededee； } .一天周末{ 背景色：#E3； } .日体{ 边框：1px实心#DCDC；文本对齐：居中；垂直对齐：中间对齐；宽度：34px；高度：50px； } .结尾省略{ 左边距：3倍；颜色：#ffffff；垂直对齐：中间对齐；

我有一个例子

。月日包装器{
显示：内联块；
}
.日间包装纸{
浮动：左；
}
.日标题{
字体大小：400；
边框：1px实心#DCDC；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：34px；
高度：26px；
}
.工作日{
背景色：#ededee；
}
.一天周末{
背景色：#E3；
}
.日体{
边框：1px实心#DCDC；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：34px；
高度：50px；
}
.结尾省略{
左边距：3倍；
颜色：#ffffff；
垂直对齐：中间对齐；
文本对齐：左对齐；
空白：nowrap；
溢出：隐藏；
-ms文本溢出：省略号；
-o-text-overflow：省略号；
文本溢出：省略号；
}


我们
25
汤姆·琼斯-4000美元
Th
26
Fr
27
Sa
28
苏
29
钼
30

您不需要js，您可以在字体大小上为文本使用可缩放值

vh是高度的百分比

字体大小：2vh

vw是宽度的百分比

字体大小：2vw

vmin是较短的百分比（对移动设备有用）

字体大小：2vmin

vmax是较长值的百分比

font-size:2vmax

很难准确地理解您在这里要做什么，但这里有一些想法

在原始代码中，绿色背景预订信息是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;
}

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

祝你好运，欢迎来到Stack Overflow

有点棘手，但我认为这正是您需要的

将单词拆分到多个容器中，并将其显示为

显示：内联块
也许您可以尝试使用行高
的技巧，然后使用额外的跨距容器（或子div本身），位置：绝对
和换行
/分词
：
.end省略号
类被删除
从.month days wrapper
中删除testwidth
，以测试调整大小或播放

。月日包装器{
显示：内联块；
宽度：160px；
位置：相对位置；
}
.日间包装纸{
浮动：左；
}
.日标题{
字体大小：400；
边框：1px实心#DCDC；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：34px；
高度：26px；
}
.工作日{
背景色：#ededee；
}
.一天周末{
背景色：#E3；
}
.日体{
边框：1px实心#DCDC；
文本对齐：居中；
垂直对齐：中间对齐；
宽度：34px；
高度：50px；
}
.结尾省略{
左边距：3倍；
颜色：#ffffff；
垂直对齐：中间对齐；
文本对齐：左对齐；
空白：nowrap；
溢出：隐藏；
-ms文本溢出：省略号；
-o-text-overflow：省略号；
文本溢出：省略号；
}
布莱恩斯先生{
z指数：1；
位置：绝对位置；
最大宽度：100%；
文本对齐：左对齐；
边缘顶部：-1.6em；
文本缩进：1em；
单词包装：打断单词；
单词break：打破所有
}
.BR线路跨度{
显示：内联；
单词包装：打断单词；
单词break：打破一切；
线高：5em；
背景颜色：绿色；
边界半径：5px；
填充：0.1em；
}

我们
25
汤姆·琼斯-4000美元
Th
26
Fr
27
Sa
28
苏
29
钼
30
欢迎来到stackoverflow:）很抱歉，vh/vw不是我想要的。也许我没有很好地解释自己——也许标题本可以更好，但也有局限性。如果您看一下JSFIDLE，结果缩小的天数会增加。我希望文本跟随堆叠的日期。我不希望文本调整大小。在下图中，我需要“$4000”以“Sa 28”开头！对不起，knolljm，但不好。（有预约系统）1。是的，文本“汤姆·琼斯等”移到最后一天，但不是我要的。2.无法为预订日期设置背景颜色，因为1天可以有签出和签入。但请大家不要理会绿色。它可以通过服务器上的C#轻松控制。请大家看一看我的JSFIDLE和我对第一个回复的评论中的图片。这张图片清楚地显示文本在第一行之外溢出。我希望它能延续到第二行。我强烈怀疑它不能单靠CSS完成，但需要一些聪明的JS。无论如何，如果有人能解决它，请PM我，我会支付。对不起，不是我想要的。我用一幅新的图片编辑了我的原始问题，希望能清楚地解释我的目的。差不多了，对吧？我把这个词分成多个容器是的，的确“几乎正确”。但这些字母有时仍然超过第一排最后一天的结尾。但仍然令人印象深刻。非常感谢。那么，只需调整字母间距和主div“word cont”的左/顶部位置即可。你仍然需要一点js来生成容器，并以友好的方式调整这个值，检查长度。谢谢Giole的努力，但我不认为这里和那里有一点额外的东西可以解决这个谜。如果您认为您可以在考虑边界条件的情况下从事专业工作（请参阅我对OP的编辑），那么我很乐意为您支付报酬。或者其他任何人。否则我会把它放在自由职业者网站上。我投票决定把这个问题作为离题题来结束，因为这不是一个招揽有偿工作的网站。
.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;
}