如何在多行左对齐的同时使单行文本中心对齐？

Question

我使用下面的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> 

Answer 1

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> 

Answer 2

我建议使用JQuery解决方案：

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

可能有更好的选择，因为这个显然不防水，但它应该有所作为。