TIL

[CSS] flex로 friend list 만들기 April 13, 2020

인프런의 CSS Flex와 Grid 제대로 익히기를 보고 작성한 글입니다.

message list와 동일한 구조이지만 friend list라고 가정하자.

화면이 줄어들어 이름의 일부만 출력될 때 말줄임표를 출력하고 줄 바꿈을 막는다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./default.css">
    <link rel="stylesheet" href="./ui.css">
  </head>
  <body>
    <ul class="user-list friend-list">
      <li class="user-list-item friend-list-item">
        <figure class="user-photo" style="background-image: url(./catcat.jpg);"></figure>
        <p class="user-name">
          name name name name name name name name name
        </p>
      </li>
      <li class="user-list-item friend-list-item">
        <figure class="user-photo" style="background-image: url();"></figure>
        <p class="user-name">
          name name name name name
        </p>
      </li>
      <li class="user-list-item friend-list-item">
        <figure class="user-photo" style="background-image: url();"></figure>
        <p class="user-name">
          name
        </p>
      </li>
    </ul>
  </body>
</html>
/* friend list */
.friend-list-item {
  align-items: center;
}
.user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
Written by@[Suho]
뭐든지 만들어보자.