[CSS] 텍스트 속성 관련 정리

말줄임표 처리 시 너무 일찍(?) 말줄임 되는 경우

 

말줄임이 너무 빨리 되는 경우

 

text-overflow: ellipsis; 속성으로 말줄임표 처리를 했을 때, width 값을 부모 요소의 100%로 가지도록 해도

말줄임이 너무 빨리(?) 되어서 위와 같이 노출되는 텍스트가 너무 짧아지는 경우가 있었다.

 

 

div {
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  word-break: break-all;
}

 

word-break: break-all 적용 후

 

이럴 경우에는 word-break: break-all; 속성을 같이 써주면 해결되었다.

 

 

 

---

 

텍스트 길이로 요소의 width가 변경되어야 하는 경우

 

요소의 텍스트 길이로 그 요소의 width값이 늘었다 줄었다 변경되어야 하는 경우가 있다.

그런데 간혹 가변이 되지 않고 width값은 고정되고, 텍스트는 밀리는 경우가 있었다

 

텍스트 밀림 현상

파란색 박스가 부모 요소이고, 빨간색 박스가 자식 요소인데 빨간색 박스가 텍스트 길이에 따라 width값이 가변되어야 할 때, 자식 요소는 부모 요소에 영향을 받기 때문에 빨간색 박스에 width값을 부모 요소보다 더 크게 설정해도 부모 요소의 너비보다 더 커지지 않는다. 

.bluebox {
  position: absolute;
  top: -50px;
  background-color: lightcoral;
  white-space: nowrap;
}

white-space: nowrap 적용 후

이럴 때는 파란색 박스에 white-space: nowrap; 속성을 적용해주면 텍스트가 밀리지 않는다.