CSS 오버플로 파이어 폭스 문제
문제
사용자가 텍스트를 작성하고 스크롤 바나 숨기는 대신 오버플로 될 때 CSS를 작성하려고합니다. 일반적인 Word 문서처럼 내려갑니다. 이 코드가 있습니다.
#content-text {
width: 960px;
padding-left: 10px;
padding-right:10px;
text-align: left;
color:#000;
height:100%;
margin-left: 25px;
margin-right:25px;
}
이상한 점은이 코드가 실제로 Firefox에서 내가 원하는 것을 실제로 수행하지만 오버플로되고 스크롤 바가된다는 것입니다. 오버플로를 시도했습니다 : 자동; 오버플로 : 숨겨진; 그리고 오버플로 : 상속; 지금까지 어떤 도움이되었지만 운이 없는지 확인하기 위해, 나는 왜 이것이 Firefox에서 이것이 왜 일어나고 있는지에 대해 전혀 모른다. =/ 당신이 아는 사람이 있습니까?
업데이트 : 오버플로로 시도했습니다 : Visible; 그러나 나는 단지 오버플로를 얻는다 ... 눈에 잘 보이지만 여전히 랩되지 않습니다. 그리고 지금까지 Firefox에서만. =/
업데이트 : 영향을 줄 수있는 유일한 다른 것은 다른 CSS 코드가 있고 첫 번째 코드가 포함된다는 것입니다.
#content-title{
background-color: transparent;
background-image: url(../img/content-title-body.png);
background-repeat: repeat-y;
background-attachment: scroll;
background-x-position: 0%;
background-y-position: 0%;
height:auto;
position:absolute;
z-index :100; /* ensure the content-title is on top of navigation area */
width:1026px;/*1050px*/
margin: 160px 100px 5px 100px;
overflow: visible;
top: 55px;
}
그리고 이것을 사용하는 HTML은 다음과 같습니다.
<div id="content-title">
<div id="content-text"> Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!Hola!<p>Hola!Hola!Hola!Hola!<p>Hola!Hola!
</div>
</div>
해결책
그래서 당신의 CSS는 아마 괜찮을 것입니다. 예를 들어 내 페이지에서 CSS가 있습니다.
textarea.input_field2 {
margin: 10px 10px 10px 0px;
width: 440px;
height: 150px;
background:#696969;
color: white;
border: none;
font-size: 14px;
text-align: left;
vertical-align: middle;
}
그런 다음 몸에서 나는 다음과 같이 부릅니다.
<textarea rows="9" cols="9" class="input_field2" name="user_comments"></textarea>
잘 작동합니다. 그러나 테스트 할 때 Lorem ipsum과 같은 것을 테스트 할 때 'Aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'와 같은 긴 줄이 아닌 공백이있는 단어로 테스트하십시오. 또한 HTML 및 CSS를 확인하십시오 확인.
다른 팁
노력하다: overflow: visible
.
당신이 여기에 보여주는 것보다 이야기에 더 많은 것이 있어야합니다. 제공된 CSS를 사용했으며 Internet Explorer와 Firefox에서 동일한 동작을보고 있습니다. 페이지의 너비는 960 픽셀로 렌더링되며 브라우저 너비가 이보다 적을 때 수평 스크롤 막대가 렌더링됩니다.
요소에 너비를 지정하면 브라우저 가이 값보다 적게 렌더링하지 않습니다. 예제에서 너비 선언을 제거하면 요소가 필요한만큼 넓게 렌더링됩니다.
이것이 당신이 찾고있는 대답이 아니라면, 전체 그림을 제공하기 위해 더 많은 코드를 제공하십시오.
추가하다 word-wrap: break-word;
너의 ~에게 #content-text