Make div Breite variiert mit jQuery

Question

Ich habe ein div, in dem ich zufrieden jede halbe Sekunde über die folgende Funktion zu erzeugen:

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); 

Die div#date-and-time verschachtelt ist in den folgenden div wie so:

<div id="calDateTimeBox"> 
 
     <i id="clock-link" class="fa fa-calendar" aria-hidden="true" data-title="Click to show calendar."></i> 
 
     <div id="date-and-time">10:06PM Wednesday, March 29th, 2017</div> 
 
    </div>

mit #calDateTimeBox und #clock-link mit CSS:

#calDateTimeBox { 
    position: absolute; 
    top: 40px; 
    margin-left: -357px; 
    width: 340px; 
    height: auto; 
    font-family: 'Many Secrets'; 
    font-size: 20px; 
    letter-spacing: 1px; 
    line-height: 1.2; 
    color: #FFF; 
    background: rgba(0, 0, 0, 0.75); 
    text-shadow: 4px 4px 1px #000; 
    border-radius: 5px; 
    text-align: center; 
    padding: 10px 20px; 
    pointer-events: none; 
    opacity: 0; 
} 

#clock-link { 
    font-family:'FontAwesome'; 
    float: left; 
    margin-right: 10px; 
    margin-left: 5px; 
} 

Wenn die Zeiten und Daten auf der längeren Seite sind, sieht die div wie so:

Aber ich will es so aussehen:

Ist es möglich, mit jQuery, adjus die div zu bekommen t Wenn der Inhalt zu einer zweiten Zeile überläuft? Wenn ja, wie würde ich diesen Effekt erreichen?

Answer 1

ändern

#calDateTimeBox { 
    width: 340px; 
} 

zu:

#calDateTimeBox { 
    min-width: 340px; 
} 

Und Problem gelöst zu sein scheint. Dadurch wird das Datum immer noch auf die andere Zeile gesetzt, wenn der übergeordnete Container nicht breit genug ist, um ihn aufzunehmen.

Sie können auch hinzufügen:

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

Aber ich würde nicht empfehlen, weil Ihr Text außerhalb des div Container abgeschnitten/show werden.