Hướng dẫn css align rotated text - css căn chỉnh văn bản xoay

Tôi có một văn bản xoay trong một div. Tôi muốn căn chỉnh nhịp theo "bên phải" (xem mũi tên màu đỏ) của div

  This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way


    .rotateText{
      width: 200px;
      height: 300px;
      writing-mode: tb-rl;
      transform: rotate(-180deg);
      background-color: yellow;
    }

https://jsfiddle.net/konqmr8c/1/

hỏi ngày 10 tháng 7 năm 2020 lúc 13:57Jul 10, 2020 at 13:57

NeoneoNeo

1.3374 huy hiệu vàng21 Huy hiệu bạc48 Huy hiệu đồng4 gold badges21 silver badges48 bronze badges

2

Cách khá đơn giản để làm điều này sẽ là với position: absolute. Áp dụng relative cho thùng chứa cha mẹ để bạn có thể neo nhịp vào nó, sau đó đặt left: 0. Điều này sẽ làm cho văn bản ôm dưới cùng của container.

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

Điều này sẽ dẫn đến điều này:

Nếu bạn muốn chỉ xoay toàn bộ hộp, chỉ cần xóa thuộc tính

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

0. Kết quả là:

Đã trả lời ngày 10 tháng 7 năm 2020 lúc 14:07Jul 10, 2020 at 14:07

James Ivesjames IvesJames Ives

3.0953 Huy hiệu vàng27 Huy hiệu bạc61 Huy hiệu Đồng3 gold badges27 silver badges61 bronze badges

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position:relative;
}

span {
  border:1px solid red;
  position:absolute;
  left: 0px;
}

Đã trả lời ngày 10 tháng 7 năm 2020 lúc 14:09Jul 10, 2020 at 14:09

Bạn có thể không cần thêm một container,

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

1,

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

2 và

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

3 nên làm.

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

4 Thiếu cho một số trình duyệt sẽ yêu cầu chuyển đổi để đặt lại nó ở phía đối diện.

.rotateText {
  width: 200px;
  height: 300px;
  display: flex;
  background-color: yellow;
  align-items: flex-end;
  /* 
  writing-mode:sideways-lr; 
 ... would be great if that worked everywhere ,
 let's use what's avalaible and transform :*/
  writing-mode: tb-rl;
  transform: scale(-1)
}

.rotateText.column {
  /* if a few child, you need to reset direction and alignement */
  flex-direction: column;
  justify-content: flex-end;
  align-items: start
}


/* demo purpose */

.rotateText {
  float: left;
  margin: 0.5em;
}

h2,
p {
  margin: 0.15em;
}

  This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way



  
Title prior text
  
This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way 

Đã trả lời ngày 7 tháng 10 năm 2020 lúc 7:48Oct 7, 2020 at 7:48

G-CyrillusG-CyrillusG-Cyrillus

97.5K13 Huy hiệu vàng97 Huy hiệu bạc121 Huy hiệu đồng13 gold badges97 silver badges121 bronze badges

Flexbox có thể làm điều đó:

Lưu ý rằng

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

2 và

.rotateText{
  width: 200px;
  height: 300px;
  writing-mode: tb-rl;
  transform: rotate(-180deg);
  background-color: yellow;
  position: relative;
}

span {
  position: absolute;
  left: 0;
}

0 nên có trên con chứ không phải cha mẹ.child and not the parent.

.rotateText {
  width: 200px;
  height: 300px;
  display: flex;
  background-color: yellow;
  justify-content: flex-end;
}

span {
  writing-mode: tb-rl;
  transform: rotate(180deg);
}

  This is a rotated multiline text please display it in a correct way. This is a rotated multiline text please display it in a correct way

Đã trả lời ngày 10 tháng 7 năm 2020 lúc 14:15Jul 10, 2020 at 14:15

Paulie_DPaulie_DPaulie_D

105K12 Huy hiệu vàng126 Huy hiệu bạc150 Huy hiệu đồng12 gold badges126 silver badges150 bronze badges

0