css 단어개행/모든 브라우저에서 한글, 영문 모두 단어 개행하는 방법. (Ie,Firefox,Chrome,Safari 줄바꿈…
페이지 정보
작성자 홈피사랑 작성일15-04-14 17:51 조회6,242회 댓글0건관련링크
본문
익스에서는 css(word-break:keep-all)로 쉽게 단어기준 개행이 가능합니다.
하지만 다른 브라우저에서는 거의 작동하지 않습니다.
<br/>을 사용하는 방법도 있지만 반응형 웹을 만들경우는 이방법을 쓰면 화면 사이즈에 따라 보기 싫게 보입니다.
일반 웹페이지 만들때도 사용을 자제하는것이 좋습니다.
다른 방법도 있지만 모든 브라우저를 맞추기 힘들어서 jquery로 간단하게 만들어봤습니다.
사용자가 입력하는 프로그램 뷰페이지라면 약간의 문제가 있긴 하지만 디자인 페이지에 적용할때는 유용하게 사용하실수 있습니다.
************** html **************
<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<script src="jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="common.js" type="text/javascript"></script>
<style>
.cont{overflow:hidden;}
.cont span{float:left;}
</style>
</head>
<body>
<p class="cont">홈피사랑 띄어쓰기 테스트 입니다. 홈피사랑 띄어쓰기 테스트 입니다. 홈피사랑 띄어쓰기 테스트 입니다. 홈피사랑 띄어쓰기 테스트 입니다. 홈피사랑 띄어쓰기 테스트 입니다.</p>
<script>
$(function () {
$(".cont").spaceInit({marginRight:5});
});
</script>
</body>
</html>
---------------------------------------------------
************** js 파일 **************
(function ($) {
// 띄어쓰기
$.fn.spaceInit = function (option) {
var $this = this;
var marginRight = option.marginRight;
function config() {
$this.each(function (i) {
var str = $(this).html();
var str1 = "";
str1 = "<span>" + str.split(" ").join("</span> <span>") + "</span>";
str1 = str1.split("<span></span>").join("");
$(this).html(str1);
});
$this.find("span").css("marginRight",marginRight+"px")
}
config();
}
})(jQuery);
전체예제코드
댓글목록
등록된 댓글이 없습니다.
