반응형 웹사이트에서 긴 문장의 단어 잘리는 문제 해결 방법

반응형 웹사이트를 제작할 때, 긴 문장을 출력해야 할 경우, 화면 끝에서 단어가 중간에 잘려버리는 문제가 발생한다. 유저의 화면 크기를 예상할 수 없기 때문에 일일이 엔터를 쳐주는것도 불가능한 상황.

이것을 간단히 해결하는 방법을 공유하고자 한다.

function lmh_text_block($text) {
	$result = "<span class='lmh-text-block'>".str_replace(" ","</span> <span class='lmh-text-block'>",preg_replace("!\s+!", " ", $text))."</span>";
	$result = str_replace("<br />","<br /><span class='lmh-text-block'>",$result);
	return $result;
}

PHP 함수를 위와 같이 추가하고, 

.lmh-text-block { display: inline-block; white-space: nowrap; }

이렇게 CSS 클래스를 추가하면 끝!

사용방법은 이렇게~

$text = "어디서나 누구에게나 무엇에서나 배움을 얻을 수 있는 사람은 당당하다. 사방이 배움의 원천이므로 함부로 행동하지 않는다. 공손하지만 냉철히 관찰한다. 질투나 시기따윈 있을 수 없다. 누구에게나 배울 점은 있기 마련이기 때문이다.";
$text = lmh_text_block($text);

비포 애프터를 비교하면 이렇다 (오른쪽이 적용 결과).

적용 전

적용 후

* 주의> 
위 PHP 소스는 긴 문장에 <br/> 태그 외에 다른 HTML 코드가 있을 경우 단어로 인식하고 span으로 감싸버린다.
이를 해결하려면 별도로 소스를 수정해서 사용해야 한다.

* 예문출처> 완전 멋진 모습