250905 - flexbox 텍스트 오버플로우 적용하기

저녁에 약속이 잇어서.. 미리 올려야집

 

<div className={styles.header}>
    <SafeImage className={styles.avatar} alt="" src={user.profileImageUrl} />
    <div className={styles.profileInfo}>
        <span className={styles.profileName}>{user.name}</span>
        <span className={styles.profileEmail}>{user.email}</span>
    </div>
</div>

 

프로필 이미지와 이름, 메일이 보이는 아주 간단한 UI

이메일이나 이름이 길어졌을 때 잘리는 현상이 있어서, ... 으로 표기하려고 한다.

 

.profileInfo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

 

표시하려는 요소를 담고 있는 div 에 적용할 스타일이다.

flex: 1; -> 남은 공간을 모두 차지한다. 여기서는 프로필 이미지를 제외한 나머지.

min-width: 0; //이게 없으면 그 밑에 text-overflow: ellipsis; 를 백날 설정해도 작동하지 않는다..

 

Flexbox 은 기본적으로 자식 요소가 내용보다 작아지지 않으려고 한다.

따라서 min-width 를 통해 작아져도 괜찮다고 브라우저에 알리는 역할을 한다.

 

.profileName {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2.2rem;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;

    @include responsive.responsive(mobile) {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }
}

.profileEmail {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 2rem;

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;

    @include responsive.responsive(mobile) {
        font-size: 1.2rem;
        line-height: 1.8rem;
    }
}

이제 이렇게 해주면 텍스트가 컨테이너 크기에 맞춰 ... 으로 표시될 것이다!