Как выровнять однострочный текст по центру, а многострочный-по левому краю?

Я использую ниже css для выравнивания текста посередине и слева, когда многострочный, но как выровнять текст посередине и по центру, когда одна строка?

.my-text {
    border: 1px solid black;
    width: 400px;
    height: 160px;
    vertical-align: middle;
    display: table-cell;
    overflow: hidden;
    line-height: 20px;
    padding: 20px;
}
<div class="my-text">
    carpe diem
</div>
<div class="my-text">
    carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem
</div>
6
alignment css html text-align

2 ответов

  1. оберните текст в встроенный элемент, например <span>.
  2. сделать inline-block и установите выравнивание текста в left.

.my-text {
  border: 1px solid black;
  width: 400px;
  height: 160px;
  vertical-align: middle;
  display: table-cell;
  overflow: hidden;
  line-height: 20px;
  text-align: center;
  padding: 10px;
}

.my-text span {
  display: inline-block;
  vertical-align: top;
  text-align: left;
}
<div class="my-text">
  <span>carpe diem</span>
</div>

<div class="my-text">
  <span>carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem carpe diem</span>
</div>
9

Я бы рекомендовал использовать решение JQuery:

$(".my-text").keypress(function() {
   if($(this).val().length >= 50) {
      $(this).css("text-align", "left");
   }
   else {
     $(this).css("text-align", "center");
   }
});

могут быть лучшие альтернативы, поскольку этот, очевидно, не является водонепроницаемым, но он должен сделать трюк несколько.

-1