CSS로 <br> 무시 하시겠습니까?

<br>일부 제목 과 같이 줄 바꿈이 삽입 된 사이트 에서 작업 중입니다. 소스 HTML을 편집 할 수 없다고 가정 할 때 CSS를 사용하여 이러한 중단을 무시할 수있는 방법이 있습니까?

저는 사이트를 모바일 최적화하고 있으므로 JavaScript를 사용하고 싶지 않습니다.

css를 사용하면 br 태그를 "숨길"수 있으며 효과가 없습니다.

br {
    display: none;
}

특정 제목 유형 내에서 일부만 숨기려면 CSS를 더 구체적으로 만드십시오.

h3 br {
    display: none;
}

참고 :이 솔루션은 자체 닫는 태그에 의사 요소를 잘못 적용하는 Webkit 브라우저에서만 작동합니다.

위의 답변에 대한 부록으로 어떤 경우에는 단순히 무시하는 대신 공백을 삽입해야한다는 점에 주목할 가치가 있습니다 <br>.

예를 들어 위의 답변은

Monday<br>05 August

에

Monday05 August

주간 이벤트 캘린더를 포맷하는 동안 확인했습니다. "월요일"뒤에 공백을 삽입하는 것이 좋습니다. CSS에 다음을 삽입하면 쉽게 수행 할 수 있습니다.

br  {
    content: ' '
}
br:after {
    content: ' '
}

이것은 만들 것입니다

Monday<br>05 August

처럼 보인다

Monday 05 August

쉼표로 구분하려는 경우 content속성을 br:after로 변경 ', '하거나 원하는 항목을 입력 ' '하여 구분 기호로 만들 수 있습니다! 그런데

Monday, 05 August

깔끔해 보인다 ;-)

참조는 여기 를 참조 하십시오 .

위의 답변에서와 같이 태그별로 만들고 싶다면 할 수 있습니다. 이 속성이 tag <h3>에 대해 작동하도록하려면 예를 들어 및 h3앞에 각각을 추가하면 됩니다 .brbr:after

가장 일반적으로 의사 태그에 대해 작동합니다.

스타일을 추가하면

br{
    display: none;
}

그러면 작동합니다. 그래도 이전 버전의 IE에서 작동하는지 확실하지 않습니다.

이것이 내가하는 방법입니다.

br { 
    display: inline;
    content: ' ';
    clear:none;
}

대체 요소에 대해 "정의되지 않은"의사 요소에 따라 다르기 때문에 공백 메서드가 작동하도록하려면 span대신 요소를 사용할 수 있습니다 br.

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

데모

줄 바꿈은 적절한 범위 요소를로 설정하여 간단히 수행됩니다 display:block.

HTML 마크 업에서 ID 및 / 또는 클래스를 사용하여 CSS로 모든 단일 또는 조합 요소를 쉽게 타겟팅하거나 nth-child().

따라서 반응 형 레이아웃에 미디어 쿼리를 사용하여 다른 중단 점을 정의 할 수 있습니다.

또한 Javascript (jQuery)로 클래스를 추가 / 제거 / 토글 할 수도 있습니다.

이 방법의 "장점"은 견고성입니다. 의사 요소를 지원하는 모든 브라우저에서 작동합니다 (참조 : Can I use-CSS 생성 콘텐츠 ).

대안으로 의사 요소를 통해 줄 바꿈을 추가 할 수도 있습니다.

span.break:before {  
    content: "\A";
    white-space: pre;
}

데모

나를 위해 다음과 같이 더 좋아 보입니다.

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

이를 위해 다음과 같이 할 수 있습니다.

br{display: none;}

PRE 태그 안에 있으면 PRE 태그가 일반 블록 요소처럼 작동하도록하려면 다음 CSS를 사용할 수 있습니다.

pre {white-space: normal;}

또는 다음 과 같이 Aneesh Karthik C 의 스타일을 따를 수 있습니다 .

br  {content: ' '}
br:after {content: ' '}

나는 당신이 그것을 얻은 것 같아요

질문에 따라 Aneesh Karthik C 접근 방식을 사용하여 Firefox 및 Opera에서이 문제를 해결 하려면 "float"right "속성을 추가해야합니다.

여기 에서 예를 확인 하십시오. 이 CSS는 Firefox (26.0), Opera (12.15), Chrome (32.0.1700) 및 Safari (7.0)에서 작동합니다.

br {
   content: " ";  
   float:right; 
}

나는 이것이 당신의 질문에 대답하기를 바랍니다 !!

이 질문은 이미 해결 된 것처럼 보이지만 수락 된 답변으로는 Firefox에서 문제가 해결되지 않았습니다. 파이어 폭스 (그리고 IE는 시도하지 않았지만)는 "content"태그의 내용을 읽는 동안 공백을 건너 뜁니다. Mozilla가 왜 그렇게했는지 완전히 이해하지만 문제가 있습니다. 내가 찾은 가장 쉬운 해결 방법은 아래와 같이 일반 공백 대신 깨지지 않는 공백을 사용하는 것입니다.

.noLineBreaks br:before{
content: '\a0'
}

보세요 .

예, 무시할 수 있습니다 <br>. 특히 모바일 장치의 중단을 제거해야하는 반응 형 디자인의 경우이 기능이 필요할 수 있습니다.

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

모바일 예제 용 CSS

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

이 Codepen을 확인하십시오.
https://codepen.io/fluidbrush/pen/pojGQyM

댓글로 간단히 변환 할 수 있습니다.

또는 다음을 수행 할 수 있습니다.

br {
display: none;
}

하지만 원하지 않는다면 왜 거기에 두는 거죠?