html/xhtml textarea에서 텍스트를 정당화하십시오

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

문제

나는 현재 Textarea에서 텍스트를 정당화하려고 노력하고 있습니다. 불행히도 CSS :

text-align: justify;

중심과 같은 텍스트에서 작동하지 않습니다. 왼쪽 및 오른쪽. 나는 Firefox 3과 IE 7에서 운이 없으면 이것을 시도했습니다.

이 주위에 어떤 방법이 있습니까?

도움이 되었습니까?

해결책

나는 이것이 HTML Textarea 요소에서 가능하다고 생각하지 않습니다. 일종의 Wysiwyg 편집기 (편집 가능한 div)를 사용할 수 있습니다. 즉. fckeditor

다른 팁

나는 같은 문제를 다루고 매우 어리석은 해결책을 발견했습니다. 표시 될 텍스트가 시작 및 종료 태그 요소 내에서 다음 줄이 아닌 동일한 줄에 속하는지 확인하십시오. 

<textarea  name="description" readonly="readonly" rows="4" cols="66">Text aligned toward left</textarea>

그리고 좋아하지 않습니다 

<textarea  name="description" readonly="readonly" rows="4" cols="66">
Text aligned toward left
</textarea>

대상 브라우저에 따라 ...이 솔루션은 Chrome에서 작동합니다. 그러나 Firefox에서 작동하지는 않지만 어쨌든 게시하겠습니다.

텍스트 정렬을 설정하는 것 외에도 정당화 할뿐만 아니라 흰색 공간을 설정해야합니다.

    textarea {
        text-align: justify;
        white-space: normal;
    }

jsfiddle : http://jsfiddle.net/cb5jn/

나는 일반적인 관행이 다음을 사용하는 것이라고 믿는다 TEXTAREA 정당화에 대해 걱정하지 않고 입력하기 위해; 그리고 일단 입력이 처리되면 FORM 제출되거나 이벤트가 있습니다 TEXTAREA 캡처 됨), 내용은 편집 할 수없는 텍스트 요소 (예 : P, SPAN, TD) 여기서 text-align: justify; 스타일 속성이 영광입니다.

나에게 (Firefox에서)이 코드는 완벽하게 작동합니다.

textarea{
    resize: none;
    text-align: justify;
    white-space: pre-line;
    -moz-text-align-last: left;
    text-align-last: left;
}

일반적인 사용 만족스러운 div = "true" 내 경우에 일했습니다. 대부분의 모바일 브라우저에서는 작동하지 않습니다.

<div contenteditable="true">Some content</div>

Chrome에서는 잘 작동하지만 IE에는 잘 작동하지 않습니다.

텍스트 정렬 : 정당화; 흰색 공간 : 정상;

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