使div宽度随jQuery变化

我有一个

div

，通过以下功能每半秒生成一次内容：

function ClockAndCalendar() {
  var da = new Date();
  var hours = da.getHours();
  var minutes = da.getMinutes();
  var ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12; // the hour '0' should be '12'
  minutes = minutes < 10 ? '0' + minutes : minutes;
  var actualTime = hours + ':' + minutes + ampm;
  var wd = weekday[da.getDay()];
  var month = mon[da.getMonth()];
  var curDate = da.getDate();
  var suffix = ending[da.getDate() - 1];
  var timeAndDate = (actualTime + " " + wd + ", " + month + " " + curDate + suffix + ", " + y);
  var newDiv = $('#date-and-time').text(timeAndDate);

  return newDiv;
}
var getTimeDateCalendar = setInterval(ClockAndCalendar, 500);

改变

#calDateTimeBox {
   width: 340px;
}

致：

问题似乎已经解决了。如果父容器的宽度不足以容纳日期，则这仍然会使日期转到另一行

您还可以添加：

#date-and-time {
   white-space: nowrap;
}

---

但是我不建议这样做，因为您的文本将被切掉/显示在div容器之外。

为什么宽度是固定的？

#date-and-time {
   white-space: nowrap;
}