-
div 안에 text 요소가 넘치면 줄바꿈이 되는데 안되게 할 수는 없어?Html & CSS 2023. 3. 25. 04:00
📌 chatGpt의 답변
CSS의 white-space 속성을 사용하여 텍스트의 줄바꿈을 제어할 수 있습니다.
white-space 속성을 nowrap으로 설정하면 텍스트가 넘치더라도 줄바꿈이 되지 않습니다.
다음은 예시 코드입니다:
div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
위의 코드에서 div는 넘치는 텍스트를 포함하는 요소의 선택자입니다.
white-space: nowrap 속성은 텍스트가 한 줄에만 표시되도록 하고,
overflow: hidden 속성은 넘치는 부분이 잘리도록 합니다.
마지막으로 text-overflow: ellipsis 속성은 넘친 부분에 대해서는 생략 부호를 표시하도록 합니다.
이렇게 작성하면 텍스트가 넘치더라도 줄바꿈이 되지 않고, 넘친 부분은 생략 부호로 대체되며 잘리게 됩니다.
'Html & CSS' 카테고리의 다른 글
flex 를 사용할 때 div의 border들이 서로겹쳐 경계선이 두껍게 보인다면 해결책! (0) 2023.03.25 div height 100% 처리하기CSS 100vh로 하자 (0) 2023.02.25