문자열 정리 3종 세트, 텍스트 깔끔하게 정리 & 정렬 하기

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

문자열이 이쁘게 변화해 가는 과정을 살펴봅시다 ^^

예제 1
아래 예제를 이쁘게 만들어 보겠습니다.
보기
CSS 공작소에 방문해 주셔서 감사드려용 *^^*

가나 가봉 가이아나 감비아 과테말라 그레나다 그리스 기니 기니비사우 나고르노카라바흐 공화국 나미비아 나우루 나이지리아 남수단 남아프리카 공화국 남오세티야 네덜란드 네팔 노르웨이 뉴질랜드 니제르 니카라과 대한민국 덴마크 도미니카 도미니카 공화국 독일 동티모르 라오스 라이베리아 라트비아 러시아 레바논 레소토 루마니아 룩셈부르크 르완다 리비아 리투아니아 리히텐슈타인 마다가스카르 마셜 제도 마케도니아 공화국 말라위 말레이시아

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        margin : 0 auto;
        padding : 5px;
        width : 600px;
    }
</style>

<div class="css_test">
    CSS 공작소에 방문해 주셔서 감사드려용 *^^*<br><br>
    가나 가봉 가이아나 감비아 과테말라 그레나다 그리스 기니 기니비사우 나고르노카라바흐 공화국 나미비아 나우루 나이지리아 남수단 남아프리카 공화국 남오세티야 네덜란드 네팔 노르웨이 뉴질랜드 니제르 니카라과 대한민국 덴마크 도미니카 도미니카 공화국 독일 동티모르 라오스 라이베리아 라트비아 러시아 레바논 레소토 루마니아 룩셈부르크 르완다 리비아 리투아니아 리히텐슈타인 마다가스카르 마셜 제도 마케도니아 공화국 말라위 말레이시아<br><br>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
사용된 CSS (클릭시 보기) : borderborder-radiusmarginpaddingwidth
설명
아래 두 가지를 정리해 보겠습니다.
- 나라 이름 글자들의 오른쪽 끝부분의 들쭉 날쭉한 것 맞추기
- 박스를 뚫어버린 aaaaaaaaa 문자열 정리하기 입니다.
예제 2
글자 오른쪽 끝부분 맞추기
보기
CSS 공작소에 방문해 주셔서 감사드려용 *^^*

가나 가봉 가이아나 감비아 과테말라 그레나다 그리스 기니 기니비사우 나고르노카라바흐 공화국 나미비아 나우루 나이지리아 남수단 남아프리카 공화국 남오세티야 네덜란드 네팔 노르웨이 뉴질랜드 니제르 니카라과 대한민국 덴마크 도미니카 도미니카 공화국 독일 동티모르 라오스 라이베리아 라트비아 러시아 레바논 레소토 루마니아 룩셈부르크 르완다 리비아 리투아니아 리히텐슈타인 마다가스카르 마셜 제도 마케도니아 공화국 말라위 말레이시아

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
설명

- text-align : justify 스타일을 추가하여 글자 좌우여백 균등하게 만들어 주었습니다.
- 글자 오른쪽 끝부분이 맞춰졌습니다.
- 그런데 단어가 중간에 잘려서 줄바꿈이 되었네요.
- 단어 기준으로 줄 바꿈 하면 더 좋겠죠?

예제 3
단어 기준으로 줄 바꿈 하기
보기
CSS 공작소에 방문해 주셔서 감사드려용 *^^*

가나 가봉 가이아나 감비아 과테말라 그레나다 그리스 기니 기니비사우 나고르노카라바흐 공화국 나미비아 나우루 나이지리아 남수단 남아프리카 공화국 남오세티야 네덜란드 네팔 노르웨이 뉴질랜드 니제르 니카라과 대한민국 덴마크 도미니카 도미니카 공화국 독일 동티모르 라오스 라이베리아 라트비아 러시아 레바논 레소토 루마니아 룩셈부르크 르완다 리비아 리투아니아 리히텐슈타인 마다가스카르 마셜 제도 마케도니아 공화국 말라위 말레이시아

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
설명

- word-break : keep-all 을 추가하여 단어 단위로 줄바꿈하게 만들었습니다.
- 단어 단위로 줄바꿈이 되면 장문의 글을 읽을 때 좋습니다.
- 이제 aaaaaaaa 를 처리해 보겠습니다.

예제 4
중간을 끊어서 강제줄바꿈하기
보기
CSS 공작소에 방문해 주셔서 감사드려용 *^^*

가나 가봉 가이아나 감비아 과테말라 그레나다 그리스 기니 기니비사우 나고르노카라바흐 공화국 나미비아 나우루 나이지리아 남수단 남아프리카 공화국 남오세티야 네덜란드 네팔 노르웨이 뉴질랜드 니제르 니카라과 대한민국 덴마크 도미니카 도미니카 공화국 독일 동티모르 라오스 라이베리아 라트비아 러시아 레바논 레소토 루마니아 룩셈부르크 르완다 리비아 리투아니아 리히텐슈타인 마다가스카르 마셜 제도 마케도니아 공화국 말라위 말레이시아

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
설명

- word-wrap : break-word 를 추가하여 aaaaa 같은 공백없는 레이아웃 파괴 문자열을 강제 줄바꿈 했습니다.
- 이 스타일을 적용하면 문자열 때문에 발생하는 레이아웃 깨짐을 막을 수 있습니다.

예제 5
마무리 전체 소스
보기
CSS 공작소에 방문해 주셔서 감사드려용 *^^*

가나 가봉 가이아나 감비아 과테말라 그레나다 그리스 기니 기니비사우 나고르노카라바흐 공화국 나미비아 나우루 나이지리아 남수단 남아프리카 공화국 남오세티야 네덜란드 네팔 노르웨이 뉴질랜드 니제르 니카라과 대한민국 덴마크 도미니카 도미니카 공화국 독일 동티모르 라오스 라이베리아 라트비아 러시아 레바논 레소토 루마니아 룩셈부르크 르완다 리비아 리투아니아 리히텐슈타인 마다가스카르 마셜 제도 마케도니아 공화국 말라위 말레이시아

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
소스
<style type="text/css">
    .css_test {
        border-radius : 5px;
        border : 5px solid gray;
        margin : 0 auto;
        padding : 5px;
        width : 600px;

        text-align : justify;/* 문자열 좌우 균등 정렬 */
        word-break : keep-all;/* 단어 단위 줄바꿈 */
        word-wrap : break-word;/* 문자열 강제 줄바꿈 */
    }
</style>

<div class="css_test">
    CSS 공작소에 방문해 주셔서 감사드려용 *^^*<br><br>
    가나 가봉 가이아나 감비아 과테말라 그레나다 그리스 기니 기니비사우 나고르노카라바흐 공화국 나미비아 나우루 나이지리아 남수단 남아프리카 공화국 남오세티야 네덜란드 네팔 노르웨이 뉴질랜드 니제르 니카라과 대한민국 덴마크 도미니카 도미니카 공화국 독일 동티모르 라오스 라이베리아 라트비아 러시아 레바논 레소토 루마니아 룩셈부르크 르완다 리비아 리투아니아 리히텐슈타인 마다가스카르 마셜 제도 마케도니아 공화국 말라위 말레이시아<br><br>
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
설명
- 즐거운 CSS !! 되세요 !!