2012-11-13 3 views
2

저는 웹 서버를 사용하여 HTML 형식의 전자 메일을 보내는 작업을 해왔으며 지금까지는 줄 바꿈을 제외하고는 모든 내용이 훌륭하게 표시되었습니다. 한 줄의 텍스트 (사용자 입력)가 계속 켜져 있으며 인기있는 전자 메일 웹 클라이언트에서 가로 스크롤 막대가 생성됩니다.깨지는 단어가없는 단어 줄 바꾸기

그래서 나는 몇 가지 조사를했습니다. <div style="width: 100%; word-break: break-word;"><!-- Content here --></div>을 구현했으며이 내 말을 잘랐다는 것을 제외하고는 완벽하게 정상적으로 작동했습니다. . 내가하고 싶은 것은 단어 줄 바꾸기를 유지하면서 단어를 다음 줄로 이동시키는 것입니다.

다른 온라인 출처는 <div> 태그가 자동 줄 바꿈을 수행하지만 웹 클라이언트에서는이 방식으로 작동하지 않는다고합니다. 나는 이것이 배경 화면 CSS의 일부로 인한 것일 수도 있다고 생각하지만, 실제로 가서 조사하지는 않았다.

아무도 내 문제에 대한 해결책이나 제안이 있습니까? 나는 서버 측 포맷을하고 싶지 않다. 첫째로 나는 그것이 엉덩이의 고통이라고 생각한다. 그리고 둘째로, 나는 그것이 다른 웹 전자 메일 클라이언트에서 다르게 보일 것이라고 생각한다. .. 고마워! 이 추가 속성을 추가

답변

2

시도 :

white-space: pre-line; 
word-wrap: break-word; 

이 가능한 값의 설명이 참조를 참조하십시오 : http://www.w3schools.com/cssref/pr_text_white-space.asp

+3

나를 위해 작동하지 않는 것 같아요 ... : ( – matt

+1

어딘가에 온라인 모델이 있습니까? –

+1

내 코드는 저를 퇴장 시켰습니다 ... 모든 공백을 ' '로 변환하고 결국 하나가되었습니다. 전체 긴 문자열. 그것을 제거하고'white-space : pre-line;'스타일을 적용하는 것은 이상하게 작동했습니다. – matt

2

그것은 참 정상적인 포장을 방지 뒤에서 뭔가. 우리는 정말 무대 뒤에서 볼 필요가있을 것이다, 또는 적어도 장면에서, 상황을 분석 할 수 있지만, 간단한 경우에는합니다 (div에)이 CSS를 추가가 도움이 될 것입니다

white-space: normal; 

를 그것은 초기 값이다 아마도 무언가에 의해 무시 될 것입니다. 이 문제가 해결되지 않으면 정말 단어를 나누기 때문에 이름에서 알 수 있듯이,,,

white-space: normal !important; 

word-break: break-word을 시도합니다. 그것은 어디에서든 휴식을 허용하는 작문 시스템과 함께 사용하기위한 것입니다.

+0

사실 나는 이것을 'white-space : pre-line; 사용자 입력. 모든 공백을' '으로 바꾸고 있었기 때문에'white-space'라는 CSS 속성이 있다는 것을 결코 알지 못했습니다 ... 감사합니다! – matt