CSS 오버플로 파이어 폭스 문제

StackOverflow https://stackoverflow.com/questions/415065

  •  03-07-2019
  •  | 
  •  

문제

사용자가 텍스트를 작성하고 스크롤 바나 숨기는 대신 오버플로 될 때 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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top