세로로 회전 된 텍스트를 가로 텍스트로 맞 춥니 다

Question

일부 표제 텍스트를 표제 요소 내 스팬으로 사용하고 있습니다. 문제는 수직 범위와 나머지 텍스트 내용 사이에 생성 된 공간을 제거하는 방법을 파악할 수 없다는 것입니다.

바이올린을 보면서, 나는 "We 're Just A"를 Small in의 옆에 올리고 "Striving For A"를 Big Feel의 'B'옆에 넣으려고합니다.

는 지금처럼 보인다 무엇 : 나는

을 찾고 있어요 무엇

html로 :

<h2> 
<span class="smallVertical orangeText">We're Just A</span> 
Small<br/>Company<br/> 
<span class="smallVertical">Striving For A</span> 
<span class="orangeText">Big Feel</span> 
</h2> 

CSS의 :

@import 'https://fonts.googleapis.com/css?family=Oswald'; 

h2 { 
    text-align:right; 
    font-family:'Oswald', sans-serif; 
    text-transform:uppercase; 
    font-size:8em; 
    line-height:1.1em; 
} 

h2 span.smallVertical { 
    font-size:12%; 
    transform: rotate(-90deg); 
    letter-spacing:0.1em; 
    float:left; 
} 

h2 span.orangeText { 
    color:#FF9900; 
} 

Fiddle

그래서 기본적으로 어떻게 회전 및 비 회전 된 텍스트 사용하여 CSS 사이의 수평 공간을 제거하는 방법?

Answer 1

이 꽤 하드이며, 여기에 진짜 도움 :
이 필요한 것처럼 내가 코드를 설명하려고합니다 보인다

@import 'https://fonts.googleapis.com/css?family=Oswald'; 
 

 
h2 { 
 
    text-align: right; 
 
    font-family: 'Oswald', sans-serif; 
 
    text-transform: uppercase; 
 
    font-size: 8em; 
 
    line-height: 1.1em; 
 
} 
 

 
h2 span.smallVertical { 
 
    font-size: 12%; 
 
    letter-spacing: 0.1em; 
 
    
 
    /*float: left;     /* NOOOOOOOOOOOO :) */ 
 
    display: inline-block;   /* use this instead of float:left */ 
 
    transform: rotate(-90deg) translateY(50%); /* Add: translateY 50% */ 
 
    width: 8em;     /* same as font size (OR A BIT SMALLER) */ 
 
    text-align:center;    /* to center text inside the red thing */ 
 
    vertical-align:top;   /* top to "center" span... (yeah I know...) */ 
 
    background:rgba(255,0,0,0.1); /* just to see what the heck we're doing */ 
 
    white-space: nowrap;   /* prevent small text wrap at 8em */ 
 
} 
 

 
h2 span.orangeText { 
 
    color: #FF9900; 
 
}

<h2> 
 
    <span class="smallVertical orangeText">We're Just A</span> 
 
    Small<br/>Company<br/> 
 
    <span class="smallVertical">Striving For A</span> 
 
    <span class="orangeText">Big Feel</span> 
 
</h2>

팁-의 -tha-day : white-space: nowrap;을 추가하면 텍스트가 유명한 8em을 초과해도 여전히 멋진 문자로 표시됩니다. 엘리와는 활자 표기이 데모에서와베이스 라인에 정렬 : https://jsfiddle.net/jf5kwh3t/8/

이 "기준"합니다 (jsFiddle의 데모 마지막 줄에서 같은) 단순히
text-align: left; 사용하여 정렬 된 모든 작은 텍스트를 만들려면.

Answer 2

이것은 사용자가 묻는 것을 수행하지만 텍스트의 순서도 유지합니다.

단어를 div 태그로 묶음으로써 절대 위치 지정을 사용하여 왼쪽의 범위를 배치 할 수 있습니다.

HTML :

<h2> 
<div class="top"> 
    <span class="smallVertical orangeText">We're Just A</span> 
    Small 
</div> 
<div class="mid"> 
    Company 
</div> 
<div class="bottom"> 
    <span class="smallVertical">Striving For A</span> 
    <span class="orangeText">Big Feel</span> 
</div> 

CSS :

@import 'https://fonts.googleapis.com/css?family=Oswald'; 
h2 { 
    position: relative; 
    text-align: right; 
    font-family: 'Oswald', sans-serif; 
    text-transform: uppercase; 
    font-size: 8em; 
    line-height: 1.1em; 
} 

h2 div { 
    position: absolute; 
    right: 0; 
} 

.top { 
    top: 0; 
} 

.mid { 
    top: 135px; 
} 

.bottom { 
    top: 270px; 
} 

h2 span.smallVertical { 
    font-size: 12%; 
    transform: rotate(-90deg); 
    letter-spacing: 0.1em; 
    position: absolute; 
    top: 0; 
    left: -66px; 
} 

.bottom .smallVertical { 
    left: -76px 
} 

h2 span.orangeText { 
    color: #FF9900; 
} 

https://jsfiddle.net/jf5kwh3t/7/