css text애 관해서 문의드립니다.
본문
반응형으로 홈페이지를 만들려고 하는데요...
한가지 궁금한게 있어서 질문드립니다.
고수님들 부탁드립니다.
예를들어...
원본글은 아래와 같습니다.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
그런데 PC화면에서는 아래와 같이 보이게 줄바꿈을 하고 싶습니다.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
그리고 일반적은 스마트폰 화면에서는 아래와 같이 보이게 줄바꿈을 하고 싶습니다.
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of
the printing and typesetting industry.
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a type
specimen book.
위와 같이 화면별로 다르게 보이게 텍스트 문장의 줄바꿈을 다르게 할 수 있는지요...
질문이 좀 이상했는지 모르겠습니다.
고수님들의 많은 도움 부탁드립니다.
답변 2
반응형 미디어쿼리를 알고 계신 것으로 간주하고 말씀드리면
br태그에 클래스를 넣으시면 됩니다 ㅡ,. ㅡ
제가 쓰는 방법은
클래스명 pcbr (윈도우사이즈 769px이상 display: block; 윈도우사이즈 768px이하 display: none; )
클래스명 spbr (윈도우사이즈 768px이하 display: block;윈도우사이즈 769px이상 display: none; )
이런식으로 사용합니다.
알아서 줄바꿈 되는 것이 아니라, 어떤 특정한 위치에서 줄바꿈을 원하시는거라면
태그로 텍스트를 감싸서 컨트롤 하는 방법이 있습니다.
예를 들면
<div>Lorem Ipsum is simply dummy text of<span></span> the printing and typesetting industry.</div>
<div>Lorem Ipsum has been the industry's<span></span> standard dummy text ever since the 1500s,</div>
<div>when an unknown printer took a galley of<span></span> type and scrambled it to make a type specimen book.</div>
이런식으로 해놓고, 모바일에서만 이 부분의 span 태그를 줄바꿈 처리 하는 것입니다.
아니면 해당 부분을 pc, 모바일 2개 준비해서 하나는 감추고 하나는 보이는 식으로 처리하는 방법도 있구요.
