표 셀에 여러 줄 문자를 표시하는 방법

119

데이터베이스의 단락을 표 셀에 표시하고 싶습니다.

결과는 데이터베이스에서 구성되는 방식을 무시하고 큰 1 줄이됩니다. 예를 들어 '입력'무시 (새 줄)

데이터베이스에 쓰여진 방법에 따라 정확하게 보여주고 싶습니다.

예를 들어 단락이 다음과 같이 저장된 경우 :

hello ,
my name is x.

다음 대신에 정확하게 표시되기를 바랍니다.

hello, myname is x.

html css tablerow

— 그늘진
소스

164

white-space:pre적절한에 적용된 CSS를 사용하려고합니다 <td>. 예를 들어 모든 테이블 셀에이 작업을 수행하려면 다음을 수행하십시오.

td { white-space:pre }

또는 마크 업을 변경할 수있는 경우 <pre>콘텐츠 주위 에 태그를 사용할 수 있습니다 . 기본적으로 웹 브라우저는 사용자 에이전트 스타일 시트를 사용 white-space:pre하여이 요소에 동일한 규칙을 적용합니다 .

PRE 요소는 포함 된 텍스트가 "사전 형식화"되었음을 시각적 사용자 에이전트에 알립니다. 미리 서식이 지정된 텍스트를 처리 할 때 시각적 사용자 에이전트 :

공백을 그대로 둘 수 있습니다.

고정 피치 글꼴로 텍스트를 렌더링 할 수 있습니다.

자동 줄 바꿈을 비활성화 할 수 있습니다.

양방향 처리를 비활성화하면 안됩니다.

— Phrogz
소스

엄지 척 white-space은 널리 지원되는 CSS 2.1 속성입니다. IE8에서 테스트되었으며 훌륭하게 작동합니다.

— leesei

나는 지금 태그에 white-space: pre;적용될 때 무시되는 상황에 있습니다 <td>. <pre></pre>내용을 래핑하는 데 사용하면 잘 작동하지만이 테이블 (Excel로 내보내기)을 사용하기 때문에 많은 수의 열과 행이 내 보낸 파일의 크기를 늘리고 파일을 읽을 때 Excel이 중단됩니다. (이상한, 알아). 다른 사람이 이것을 보거나 해결책에 대한 아이디어가 있습니까?

— JoeBrockhaus 2013-08-28

1

이 솔루션은 완벽하지 않습니다. Excel에서 줄 바꿈이있는 셀에 대해 여러 줄을 생성합니다. 유일한 정답은 여기에서 찾을 수 있습니다 : bennadel.com/blog/...

— Elmue을

55

style="white-space:pre-wrap; word-wrap:break-word"

이것은 새로운 라인의 문제를 해결할 것입니다. 사전 태그는 필요한 것보다 추가 CSS를 추가합니다.

— 자지 칸스 피디 말라
소스

1

이것은 훌륭하고 표적화 된 솔루션입니다. <pre>태그는 허용 개행 문자를 넘어 모든 종류의 것들을 않지만, 이러한 스타일의 설정은 문제가 제시 해결한다.

— moveson

내 데이터에 새 줄이 포함되는 문제가 있습니다. 텍스트를 <br/> 또는 <div> 또는 <pre>로 바꾸는 것과 같은 다른 솔루션은 텍스트로만 처리되었습니다. 이 솔루션은 그 문제를 완벽하게 극복합니다.

— Anshuman Goel

환상적 !! 이것은 나를 위해 아주 잘 작동합니다. 여러 텍스트를 나열하는 JDataTable이 있었고 텍스트를 올바르게 래핑하려면 CSS가 필요했습니다! Day saver 감사합니다!

— PatsonLeaner

1

이것은 줄 바꿈을 유지하는 측면에서 저에게 효과적이지만 모든 셀의 상단에 줄 바꿈을 추가합니다 ... 어떤 해결책이 있습니까?

— jtr13

30

<pre>(사전 서식이 지정된 텍스트) 태그로 콘텐츠를 래핑합니다.

<pre>hello ,
my name is x.</pre>

— 조이스 바부
소스

3

그러나 이것은 고정 폭으로 글꼴을 덮어 씁니다.

— hardmooth

23

이 문제를 해결하기위한 두 가지 제안 :

해결 방법 1 : <div style="white-space:pre;">{database text}</div>또는<pre>{database text}</pre>

텍스트에 html 태그 나 CSS 속성이없는 경우 좋은 솔루션입니다. 예를 들어 탭을 유지할 수도 있습니다.

해결 방법 2 : 바꾸기 \n로<p></p> or <br/>

이것은 다른 텍스트 속성이나 서식을 잃지 않고 브레이크 라인을 추가하려는 경우에 유용합니다. PHP의 예는 다음과 같습니다.$text = str_replace("\n","<br />",$database_text);

당신은 또한 사용할 수 있습니다 <p></p>또는 <div></div>, 그러나 이것은 조금 더 텍스트 구문 분석이 필요합니다.

— 다니엘 빌라 보아
소스

7

서버 측 코드에서 새 줄 ( \n)을 <br/>.

PHP를 사용하는 경우 다음을 사용할 수 있습니다. nl2br()

— 로켓 위험물
소스

6

안녕하세요 저도 똑같은 일을해야했습니다! 이유를 묻지 말고 파이썬을 사용하여 html을 생성하고 목록의 항목을 반복하고 각 항목이 테이블의 단일 셀 내에서 자체 행을 차지하도록하는 방법이 필요했습니다.

br 태그가 잘 작동한다는 것을 알았습니다. 예를 들면 :

<!DOCTYPE html>
<HTML>
    <HEAD>
        <TITLE></TITLE>
    </HEAD>
    <BODY>
  <TABLE>
            <TR>
                <TD>
                    item 1 <BR>
                    item 2 <BR>
                    item 3 <BR>
                    item 4 <BR>
                </TD>
            </TR>
        </TABLE>
  </BODY>

이것은 내가 원하는 출력을 생성합니다.

— Chumbaloo
소스

5

각 줄 다음에 html 코드 태그를 사용하고 (아래 참조) 저에게 효과적입니다.

George Benson </br> 123 Main Street </br> New York, Ny 12344 </br>

— 르네
소스

2

답변이 아닌 댓글이어야합니다.

— Deep Sharma 2013

<br>은 테이블 의미를 깨뜨립니다. 텍스트 기반 브라우저를 사용하여 표를 볼 때 새 줄이 표 행처럼 표시됩니다.

— JAT86

3

아래 코드는 나에게 마술처럼 작동합니다. >>

td { white-space:pre-line }

— 수몬 바피
소스

1

<br>내부 만 추가 <td>했는데 잘 작동합니다.

— Zvi
소스

0

\n안에 넣을 문자열 변수가 있으면 td시도해 볼 수 있습니다.

<td>
    {value
        .split('\n')
        .map((s, index) => (
            <React.Fragment key={index}>
                {s}
                <br />
            </React.Fragment>
        ))}
</td>

— 유진이나 슈
소스