Перемещение переменного текста на правую сторону

Question

Я сделал счетчик месяца / сезона, который после нажатия кнопки меняет название переменной на конкретный месяц и сезон (сезон под ним), все это находится на правой стороне экрана с поплавком справа, а некоторыеКорректировка положения с помощью margin-right и поэтому, когда дело доходит до «лета», все это немного смещается влево, а не вправо, как это делалось ранее, без добавления «float: right» и «margin-right».Я действительно не знаю, как это исправить, и я не думаю, что каким-то образом изменение позиции для каждого конкретного сезона / месяца является правильным ответом.Я благодарен за любую помощь.

var numbermonth = 3;
        var month = "March";
        var season = "Spring";

        setInterval(function () {
          document.getElementById("month").innerHTML = month;
            document.getElementById("season").innerHTML = season;
            document.getElementById("numbermonth");
        }, 50);

function cekani() {
            numbermonth += 1;


            if (numbermonth == 1) {
                month = "January";
                document.getElementById("month").innerHTML = month;
            }


            if (numbermonth == 2) {
                month = "February";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 3) {
                month = "March";
                season = "Spring";
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;


            }

            if (numbermonth == 4) {
                month = "April";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 5) {
                month = "May";
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;

            }

            if (numbermonth == 6) {
                month = "June";
                season = "Summer"
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 7) {
                month = "July";
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;


            }

            if (numbermonth == 8) {
                month = "August";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 9) {
                month = "September";
                season = "Autumn"
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;


            }

            if (numbermonth == 10) {
                month = "October";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 11) {
                month = "November";
                document.getElementById("month").innerHTML = month;


            }

            if (numbermonth == 12) {
                month = "December";
                season = "Winter"
                document.getElementById("month").innerHTML = month;
                document.getElementById("season").innerHTML = season;
                numbermonth = 0;

            }

            if (season == "Spring") {
                food = food + farmers * 2;
                food = food - (lide + farmers)
                document.getElementById("food").innerHTML = food;

            }

            if (season == "Summer") {
                food = food + farmers * 3;
                food = food - (lide + farmers)
                document.getElementById("food").innerHTML = food;
            }

            if (season == "Autumn") {
                food = food + farmers * 1.25;
                food = food - (lide + farmers)
                document.getElementById("food").innerHTML = food;
            }

            if (season == "Winter") {
                food = food + farmers * 0.50;
                food = food - (lide + farmers)
                document.getElementById("food").innerHTML = food;
            }



        }

    </script>

#sezonaMesic {
            float: right;
            margin-top: -2.15%;
            margin-right: 2.5%;
        }
        
        #casTabulka {
            float: right;
            margin-top: -3.01%;
            margin-right: 6%;
        }

<table id="sezonaMesic">
            <tr>
                <td>
                    <div class="linky" style="font-size: 320%">
                        <b>
                            <img src="nextmonth.png" alt="button" style="width: 200px; height: 90px; cursor: pointer;" onclick="cekani()">
                        </b>
                    </div>
                </td>
            </tr>
        </table>

<table id="casTabulka">
            <tr>
                <td>
                    <div class="linky" style="font-size: 300%">
                        <b>
                            Month = <element id="month"></element><br> Season = <element id="season"></element>
                        </b>
                    </div>
                </td>
            </tr>
        </table>
        
 

Это должен быть рабочий фрагмент.IDK, если он выглядит хорошо, скорее всего нет, но я хочу, чтобы этот текст расширился с правой стороны

Answer 1

Проблема возникает из-за того, что контейнер не имеет указанного размера, поэтому он подстраивается под размер его содержимого.Затем, когда меняется название месяца / сезона, контейнер становится больше / меньше, и это вызывает «скачки» влево и вправо соответственно.

Одним из быстрых решений было бы добавить размер кконтейнер текста, который будет изменен (в этом случае это будет для #casTabulka .linky).Но добавления ширины будет недостаточно, потому что если слова внутри слишком длинные, они вызовут разрыв строки и перепрыгнут в несколько строк.Чтобы предотвратить это, вы можете использовать white-space: nowrap, чтобы сделать все содержимое контейнера одним словом (таким образом, не разбивая его на несколько строк).Примерно так:

#casTabulka .linky {
  width: 400px;
  white-space: nowrap;
}

Вы можете видеть, что после добавления этих изменений больше нет перехода (вам может понадобиться настроить размер, чтобы он не перекрывал кнопку):

var numbermonth = 3;
var month = "March";
var season = "Spring";

setInterval(function() {
  document.getElementById("month").innerHTML = month;
  document.getElementById("season").innerHTML = season;
  document.getElementById("numbermonth");
}, 50);

function cekani() {
  numbermonth += 1;


  if (numbermonth == 1) {
    month = "January";
    document.getElementById("month").innerHTML = month;
  }


  if (numbermonth == 2) {
    month = "February";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 3) {
    month = "March";
    season = "Spring";
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;


  }

  if (numbermonth == 4) {
    month = "April";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 5) {
    month = "May";
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;

  }

  if (numbermonth == 6) {
    month = "June";
    season = "Summer"
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 7) {
    month = "July";
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;


  }

  if (numbermonth == 8) {
    month = "August";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 9) {
    month = "September";
    season = "Autumn"
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;


  }

  if (numbermonth == 10) {
    month = "October";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 11) {
    month = "November";
    document.getElementById("month").innerHTML = month;


  }

  if (numbermonth == 12) {
    month = "December";
    season = "Winter"
    document.getElementById("month").innerHTML = month;
    document.getElementById("season").innerHTML = season;
    numbermonth = 0;

  }

  if (season == "Spring") {
    food = food + farmers * 2;
    food = food - (lide + farmers)
    document.getElementById("food").innerHTML = food;

  }

  if (season == "Summer") {
    food = food + farmers * 3;
    food = food - (lide + farmers)
    document.getElementById("food").innerHTML = food;
  }

  if (season == "Autumn") {
    food = food + farmers * 1.25;
    food = food - (lide + farmers)
    document.getElementById("food").innerHTML = food;
  }

  if (season == "Winter") {
    food = food + farmers * 0.50;
    food = food - (lide + farmers)
    document.getElementById("food").innerHTML = food;
  }



}

#sezonaMesic {
  float: right;
  margin-top: -2.15%;
  margin-right: 2.5%;
}

#casTabulka {
  float: right;
  margin-top: -3.01%;
  margin-right: 6%;
}

#casTabulka .linky {
  width: 400px;
  white-space: nowrap;
}

<table id="sezonaMesic">
  <tr>
    <td>
      <div class="linky" style="font-size: 320%">
        <b>
                            <img src="nextmonth.png" alt="button" style="width: 200px; height: 90px; cursor: pointer;" onclick="cekani()">
                        </b>
      </div>
    </td>
  </tr>
</table>

<table id="casTabulka">
  <tr>
    <td>
      <div class="linky" style="font-size: 300%">
        <b>
                            Month = <element id="month"></element><br> Season = <element id="season"></element>
                        </b>
      </div>
    </td>
  </tr>
</table>