[CSS] 확장자 제외하고, 파일명만 말줄임하는 방법(with. input file)

확장자 빼고, 파일명만 말줄임하는 방법

1) 미리보기

(1) 파일명 말줄임한 예시

See the Pen only-file-name-abbreviation by KumJungMin (@kumjungmin) on CodePen.

(2) 커스텀 파일 입력창 + 파일명 말줄임 예시

See the Pen file-input-name-abbreviation by KumJungMin (@kumjungmin) on CodePen.

2) 전체 코드보기

• 만약 파일 입력창에 파일명을 표기할 때, 확장자를 제외하고 파일명만 말줄임 하고 싶다면?
• 아래 3가지를 적용하면 된다 🙂

(1) 부모요소에 파일명, 확장자 요소를 각각 선언한다. (ex. .name , .extension)
(2) 부모의 display에 flex를 적용한다.
(3) 파일명 요소(.name)에 한 줄 말줄임 스타일을 적용하면 완성이다! (한 줄, 여러줄 말줄임 더 알아보기)
   - text-overflow: ellipsis;
   - white-space: nowrap;
   - overflow: hidden;

(1) HTML

• html의 경우, 부모 요소(.file)에 파일명(.name)과 확장자 요소(.extension)를 각각 선언하면 된다.

<p class="file">
  <span class="name">파일이름_어쩌구_저쩌구_파일이름_어쩌구_저쩌구_파일이름_어쩌구_저쩌구</span>
  <span class="extension">.png</span>
</p>

(2) SCSS

• 그 다음, 부모 요소의 display를 flex로 지정하고, 제한할 너비를 설정한다.

.file {           
    display: flex;
    width: 300px;
}

• 파일명(.name)에만 말줄임이 적용되어야 하므로, 아래 3가지 속성을 적용한다.

.name {         
  text-overflow: ellipsis; // [a]
  white-space: nowrap;     // [b]
  overflow: hidden;        // [c]
}

번호	설명
[a]	white-space: nowrap을 설정해, 자동 줄바꿈을 없앤다.
[b]	text-overflow: ellipsis 로 지정해, 글자가 특정 범위를 벗어나는 경우 말줄임으로 처리한다.
[c]	text-overflow: ellipsis 가 적용되도록 overflow를 hidden로 설정한다.

• 앞선 코드를 적용하면 파일명에만 말줄임이 적용된다.

관련 포스팅
https://mong-blog.tistory.com/entry/css-한-줄-여러-줄-말줄임