CSS로 무시 하시겠습니까?

CSS로 무시 하시겠습니까?

---

<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)로 클래스를 추가 / 제거 / 토글 할 수도 있습니다.

The "advantage" of this method is its robustness - works in every browser that supports pseudo-elements (see: Can I use - CSS Generated content).

As an alternative it is also possible to add a line break via pseudo-elements:

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

DEMO

---

For that you can just do like this:

br{display: none;}

and if it is inside some PRE tag, then you can and if you want the PRE tag to behave like a regular block element, you can use this CSS :

pre {white-space: normal;}

Or you can follow the style of Aneesh Karthik C like :

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

I think you got it

---

As per your question, to solve this problem for Firefox and Opera using Aneesh Karthik C approach you need to add "float" right" attribute.

Check the example here. This CSS works in Firefox (26.0) , Opera (12.15), Chrome (32.0.1700) and Safari (7.0)

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

I hope this will answer your question!!

---

For me looks better like this:

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>

---

While this question appears to already have been solved, the accepted answer didn't solve the problem for me on Firefox. Firefox (and possibly IE, though I haven't tried it) skip whitespaces while reading the contents of the "content" tag. While I completely understand why Mozilla would do that, it does bring its share of problems. The easiest workaround I found was to use non-breakable spaces instead of regular ones as shown below.

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

Have a look.

---

You can simply convert it in a comment..

Or you can do this:

br {
display: none;
}

But if you do not want it why are you puting that there?

참고URL : https://stackoverflow.com/questions/7596647/ignore-br-with-css