text 상자를 만드는 적절한 방법

Max 의 [textbutton] 객체를 보자.

보면, 글자가 중심에 있으면서, 길이가 길어지면 ... 으로 표시된다.

이를 html css 를 사용하여 구현해보자.

<div id="box">
  <span id="box-text">Hello I'm your father.</span>
</div>

반드시 글자를 나타내줄 새로운 태그를 부모 태그안에 집어넣어야한다.

#box {

  width : 50%;
  height : 50%;
  background-color: lightcoral;

  display: flex;              /* 자식 태그 정렬 준비 */
  justify-content: center;    /* 가로 정렬 */
  align-items: center;        /* 세로 정렬 */
  
}

#box-text {

  font-size: 15px;            /* 글자 크기 */
  color: violet;              /* 글자 색깔 */
  border: 2px solid green;    /* 글자 요소에 border 추가 */
  margin: 10px;               /* 부모 요소 기준, 10px 줄임 (4군데 모두) */
  white-space: nowrap;        /* 글자 길어져도 계속 우측으로 길어지게. */
  overflow: hidden;           /* 글자 넘어가면 짤리게 */
  text-overflow: ellipsis;    /* 글자 넘어가면 ... 으로 표시 */  
  
}

둘을 분리했을때, 위처럼 css 에서도 가독성 향상을 할수있다.