0
내 웹 페이지에 하나의 이미지 (멋진 페인트 상자 유형의 직사각형 모양)를 추가했습니다. 나는 그 위에 약간의 글을 올렸다.오버플로 텍스트는 컨테이너의 크기를 동적으로 조정해야합니다.
이제 작은 해상도 화면에서 열면 텍스트가 상자 밖으로 수직으로 나옵니다. 나는 그것을 멈추고 텍스트에 따라 수직으로 늘릴 수있는 조그 상자 (여기서는 div를 의미 함)를 만들고 싶습니다.
이 작업을 수행하는 간단한 방법이 있습니까?
는는 편집 : body 태그이
<body>
<div .class="container">
<img src="pic.jpg" class="pic" alt="">
<h2>some lenghty text</h2>
</body>
처럼 이동하고 CSS 내가 달성하고 있지 않다 위의 코드 조각 그래서 여기
.pic {
/* because as the pic is very large and need to center that */
width:40%;
margin-right:auto;
margin-left:auto;
display:block;
}
.container {
width:100%;
margin-right:auto;
margin_left:auto;
top:200px;
position:relative;
}
h2 {
position:absolute;
font-size:20px;
font-color:blue;
}
간다 있다면, 즉 원하는 텍스트 길이가 증가하면 (일부 작은 화면 또는 크기가 조정 된 경우) 컨테이너 jpg가 화면 아래로 세로로 길어 져서 상자 이미지 내부에 텍스트가 잘 들어갑니다.
시도 오버 플로우-Y : 다음 CSS3
background-size속성이 잘 지원 될 때까지, 당신은 단순히 100 %로 IMG의 높이를 설정할 수 있습니다 자동; – Vivek@Vivek, 상자 밖으로 나오는 경우 오버플로 설정은 넘치는 텍스트가 표시되는 방식 (또는 표시되지 않음) 만 변경합니다. 상자가 늘어나지 않습니다. –
'{}} 코드 버튼을 사용하고 두 번째 질문을 올바르게 포맷하는 방법을 읽어보십시오. –