div를 가로로 채우기 위해 텍스트를 어떻게 설정할 수 있습니까?

div가 200px의 지정된 너비라고 가정 해 보겠습니다. 그 다음에는 다른 양의 글자/다른 폭을 가진 div에 3 h1 요소가 있습니다. div를 채우려면 어떻게 수평으로 늘 립니 까?div를 가로로 채우기 위해 텍스트를 어떻게 설정할 수 있습니까?

<div id="Header"> 
    <div class="Logo"><h1>CORROBORREE</h1><br><h1>FROG</h1><br><h1>PROJECT</h1></div>

단어가 필요한 단어는 포함 된 div의 너비입니다.

h1에서 텍스트 정렬 정렬을 시도했지만 아무런 효과가 없었습니다.

.Logo { 
margin-left: 100px; 
height:auto; 
width: 250px; 
background-color:#666; 
font-family: Impact, Charcoal, sans-serif; 
text-align: justify; 
} 

.Logo h1 {  
font-size: 40; 
text-align:justify; 
display: inline;  
}

출처

2013-05-31 Seb Silver

누군가 다른 사람이 요청했습니다. 여기 봐 : [http://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing][1] [1] : HTTP ://stackoverflow.com/questions/4355009/css-text-justify-with-letter-spacing –

이 또한 도움이 될 수 있습니다 : http://stackoverflow.com/questions/5976289/stretch-text-to-fit-width-of- div – Pete

순수한 CSS 방법으로는 생각하지 않습니다. (바로 CSS 스타일을 사용하면 주위를 둘러 봐야합니다.) , 당신이 할 수있는 일은 ..이 방법은 각 h1에 대한 클래스를 선언 할 필요는 없습니다 CSS에서 nth-of-type를 사용하고 각 letter-spacing을 제공하고 또한 당신이 뻗어거야 텍스트

Demo

<div class="Logo"> 
    <h1>CORROBORREE</h1> 
    <br /> 
    <h1>FROG</h1> 
     <br /> 
    <h1>PROJECT</h1> 
</div> 

html, body {   /* Using this or not depends on you, 
         nothing to do with the example */ 
    width: 100%; 
    height: 100%; 
} 

.Logo { 
    background: #f00; 
    width: 300px; 
} 

.Logo h1:nth-of-type(1) { 
    letter-spacing: 4px; 
} 

.Logo h1:nth-of-type(2) { 
    letter-spacing: 70px; 
} 

.Logo h1:nth-of-type(3) { 
    letter-spacing: 25px; 
}

내가 원하는 이유 이 슈퍼 이상한 모양 사촌 t, 내가 모르는

출처

2013-05-31 08:35:25

멋지게 완료, nth-of-type에 대해 결코 알지 못함 –

@CTravel Yea, 더 많은 것이 있습니다.) –

니스, 그것에 대해 자세히 알아보기 위해 검색 할 것입니다! –

-3

텍스트 정렬 : 양쪽 정렬 및 표시 : 블록. 한 페이지에 하나의 h1 태그 만있을 수 있습니다.

출처

2013-05-31 08:30:47 Foker

실제로 html5로 여러 h1 태그를 사용하는 것이 좋습니다 – Pete

여러 수준에서 잘못되었습니다 ...'justify'는 연결된 문자가 아닌 _words_ 사이의 공백에서만 작동하며 한 줄의 내용에서는 작동하지 않습니다. 그리고 물론 문서는 여러 개의 'h1'을 가질 수 있습니다 (만드는 방법이 다른 질문 인 이유는 작성하려는 내용 구조에 달려 있습니다). – CBroe

사용 letter-spacing

예 : letter-spacing:20px

출처

2013-05-31 08:49:19 geovani075

에 체크 아웃 :

Demo

CSS :

#Header{ 
    width:200px; 
    height:200px; 
    background-color:grey; 
    overflow:hidden; 
} 
#h1{ 
    -webkit-transform:scaleX(0.78); 
    margin:0 0 0 -25px; 
} 
#h2{ 
-webkit-transform:scaleX(2.3); 
    margin:0 0 0 70px; 

} 

#h3{ 
-webkit-transform:scaleX(1.3); 
    margin:0 0 0 25px; 

}

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <div id="Header"> 
    <div class="Logo"><h1 id='h1'>CORROBORREE</h1><br><h1 id='h2'>FROG</h1><br><h1 id='h3'>PROJECT</h1></div></div> 
</body> 
</html>

출처

2013-05-31 08:51:46 Arpit

div를 가로로 채우기 위해 텍스트를 어떻게 설정할 수 있습니까?

답변

관련 문제