728x90
반응형

text-overflow
말줄임표 조건
- width의 값이 지정되어야 함.
  ex)width:300px;
- 줄 넘김이 되지 말아야 함.  
  ex)white-space:nowrap;
- 넘치는 부분에 대해 감춤처리를 해주어야 함.  
  ex)overflow:hidden;
- 말줄임표시 기호처리를 해야 함.  
  ex)text-overflow:ellipsis;
  
overflow:visible;
default
  
overflow:auto;
white-space:nowrap; 
white-space:nowrap; overflow: hidden;
text-overflow
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>overflow</title>
    <style>
        /* 말줄임표 조건
        - width의 값이 지정되어야 함. ex)width:300px;
        - 줄 넘김이 되지 말아야 함.  ex)white-space:nowrap;
        - 넘치는 부분에 대해 감춤처리를 해주어야 함.  ex)overflow:hidden;
        - 말줄임표시 기호처리를 해야 함.  ex)text-overflow:ellipsis; */
        .content {
            border:1px solid#ccc;
            width: 300px;
            height:100px;
            overflow:auto;
            text-overflow: ellipsis;
        }

        .pcon {white-space:nowrap; 
            overflow: hidden;
        }

        .content:hover {
            overflow:visible;
            
            width: 100%;
            white-space: initial;
        }
    </style>
</head>
<body>
    <h2>Never</h2>
    <p class="content pcon" title="Never let your Memories be greater than your Dreams">
        Never let your Memories be greater than your Dreams
        Never let your Memories be greater than your Dreams
        Never let your Memories be greater than your Dreams
        Never let your Memories be greater than your Dreams
    </p>
    <p class="content">
        Never let your Memories be greater than your Dreams
        Never let your Memories be greater than your Dreams
        Never let your Memories be greater than your Dreams
        Never let your Memories be greater than your Dreams
    </p>
</body>
</html>
hover시

 

letter-spacing (글자 사이의 자간)
letter-spacing:
  

 

word-sapcing (단어자 사이의 자간)
word-spacing:
   
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>letter-spacing와 word-spacing</title>
    <style>
      h1 {
        font-size: 40px;
      }
      /* 글자 사이의 자간 : letter-spacing */
      .letter1 {        letter-spacing: 0.2em;      }
      .letter2 {        letter-spacing: 0.5em;      }
      .letter3 {        letter-spacing: 50px;        letter-spacing: -5px;      }

      /* 단어자 사이의 자간 : word-spacing */
      #letter1 {        word-spacing: 0.2em;      }
      #letter2 {        word-spacing: 0.5em;      }
      #letter3 {        word-spacing: 50px;      }
      div {        border: 1px solid black;      }
    </style>
  </head>
  <body>
    <div id="letter">
      <h1>letter-spacing</h1>
      <h1>기본: HTML5</h1>
      <h1 class="letter1">0.2em: HTML5</h1>
      <h1 class="letter2">0.5em: HTML5</h1>
      <h1 class="letter3">50px: HTML5</h1>
    </div>

    <div id="word">
      <h1>word-spacing</h1>
      <h1>기본: HTML5</h1>
      <h1 id="letter1">HTML5 word-spacing</h1>
      <h1 id="letter2">HTML5 word-spacing</h1>
      <h1 id="letter3">HTML5 word-spacing</h1>
    </div>
  </body>
</html>

 

728x90
반응형
저작자표시 비영리 변경금지

'[CSS]' 카테고리의 다른 글

[CSS] <meta>  (0) 2024.02.23
[CSS] vertical-align  (0) 2024.02.23
[CSS] text-align(텍스트 정렬), text-indent(들여쓰기)  (0) 2024.02.23
[CSS] text em, rem, text-shadow(텍스트 그림자)  (0) 2024.02.23
[CSS] video  (0) 2024.02.23

+ Recent posts

티스토리툴바