HTML, CSS

(34)CSS_CSS텍스트5

빠스무 2023. 3. 29. 18:16
728x90
 

(15)CSS_기본 문법

CSS(Cascading Style Sheets) 웹 페이지의 특정 요소 또는 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 ✔ 참고 MDN: https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information a

jm-rograming.tistory.com

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 텍스트5</title>
    <style>
        p{display : inline-block; width: 200px; border: 1px solid red;}
        .tof1{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
        .tof1{white-space: nowrap; overflow: hidden; text-overflow: clip;}
        .of1{height: 150px; overflow: scroll;}
        .of2{height: 150px; overflow-x: hidden; overflow-y: scroll;}
        .content{
            border: 3px dotted deeppink;
            width: 400px;
            padding: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .content:hover{
            overflow: visible
        }
    </style>
</head>
<body>
    <h2>css 텍스트5</h2>
    <p class = "tof1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
    <p class = "tof2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
    <p class = "of1">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
    <p class = "of2">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>
    <p class = "content">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odio at placeat aspernatur doloribus repellendus magni esse vel magnam rem! Velit voluptatum quas, dolores accusamus nisi ipsa vel soluta eveniet adipisci!</p>

</body>
</html>