問題描述

當我使用 TEXT 旋轉和內聯圖層時，它會在旋轉時增加額外的空間(大文本的寬度)，我不想修復.使用 CSS 旋轉時避免兩側多余空間(元素寬度)的最佳方法是什么.

When I rotate and inline layer with TEXT, it adds extra space (width of large text) on the rotation, I dont want to fix. What is the best way to avoid extra space (width of element) on both sides when rotating with CSS.

以下是我的代碼:

.rotate {
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 100%) rotate(-90deg);
  transform-origin: 0 0;
  vertical-align: bottom;
}

.rotate:before {
  content: "";
  float: left;
  margin-top: 100%;
}

.rotate:after {
  content: "";
  display: inline-block;
}

<div style="display:inline-block; position:relative;" class="rotate">
  <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span>
  <span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span>

</div>
Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

推薦答案

您可以嘗試使用 寫作模式 .

You may try to use writing-mode .

writing-mode CSS 屬性定義文本行是水平還是垂直布局，以及塊前進的方向.

The writing-mode CSS property defines whether lines of text are laid out horizontally or vertically and the direction in which blocks progress.

https://codepen.io/gc-nomade/pen/rGJGzQ?editors=1100

.rotate {
  writing-mode:vertical-rl;
  transform:scale(-1);
  width:50px;
  margin-right:50px;
}

body {
  display:flex;
  align-items:flex-end; 
}

<div style="display:inline-block; position:relative;" class="rotate">
  <span style="displock;width:100%;font-size: 55px;color: #222222;opacity: 0.15;white-space: nowrap;">BACKGROUND</span>
  <span style="display:block;width:100%;font-size: 45px;color: #222222;text-align:center;">TITLE</span>

</div>
Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

或 transform:rotate(-90deg) (這是您的首選)，但使用偽來根據文本長度重置高度.(這需要使用 rgba() 顏色并將兩行文本設置在一個容器中.https://codepen.io/gc-nomade/pen/RLQLJG?editors=1100

or transform:rotate(-90deg) (which was your first choice), but with a pseudo to reset height according to text-length. (this requires to use rgba() colors and set both line of text in a single container. https://codepen.io/gc-nomade/pen/RLQLJG?editors=1100

.rotate {
  width:110px;
}
.rotate>span   {
  display:inline-block; 
  transform:rotate(-90deg)
}
.rotate > span:before {
  content:'';
  padding-top:100%;
  float:left;
}

body {
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
}

			<div style="display:inline-block; position:relative;" class="rotate">
				<span style=" font-size: 55px;color: rgba(0,0,0,0.15);white-space: nowrap;">BACKGROUND<br/>
				<span style="display:block;font-size: 45px;color: #222222;text-align:center;">TITLE</span></span>				
			</div>
      Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element Some randome text here should be close to the rotated element

兩種技術，需要為旋轉文本容器設置寬度，并且是從彈性容器構建的.它應該可以在 IE、FF、Chrome 中運行.(display:table/table-cell 可以是舊瀏覽器的另一個 display 選項)

Both technics here, requires to set a width to the rotating text container and are build from a flex container. It should work in IE,FF,Chrome. (display:table/table-cell can be another display option for older browser)

這篇關于CSS垂直旋轉文本 - 兩側的額外空間的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！