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

//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