어떤 케이스?
길이가 일정하지 않은 텍스트에 말줄임을 적용하고 텍스트 바로 옆에 이미지를 붙이고 싶은 경우에는 어떻게 해야할까요?
간단하게 flex박스를 사용할 수 있을 것입니다. 예시로 소스를 만들어 보겠습니다.
html>
<!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="./css/index.css">
</head>
<body>
<div class="container">
<p>길이가 일정하지 않은 텍스트</p>
<i></i>
</div>
</body>
</html>
css>
.container{
width: 200px;
height: 200px;
border: 1px solid #000;
}
i{
display: block;
width: 10px;
height: 10px;
background: #000;
}
말줄임을 적용하기 전 상태입니다.이후는 일반적으로 말줄임을 적용하고 flexbox를 사용해 텍스트 옆에 아이콘을 붙이는 소스입니다.
html>
<!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="./css/index.css">
</head>
<body>
<div class="container">
<p>길이가 일정하지 않은 텍스트</p>
<i></i>
</div>
</body>
</html>
css>
.container{
display: flex;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid #000;
}
p{
max-width:180px
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
i{
width: 10px;
height: 10px;
background: #000;
}이때 위 소스처럼 p에 max-width를 지정해주지 않으면 p는 container안에서 내용물이 가질 수 있는 최대 크기로 늘어나게 되어 icon이 짤리게 됩니다.
따라서 적절한 max-width값을 사용하여 아이콘과 텍스트가 배치될 수 있도록 하는 것이 좋겠습니다.
