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
앞에 각각을 추가하면 됩니다 .br
br: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;
}
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'
}
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
'Programing' 카테고리의 다른 글
PostMan에서 특정 CURL 시뮬레이션 (0) | 2020.08.18 |
---|---|
SQL Server 2008의 XML 필드에서 값 선택 (0) | 2020.08.18 |
친근한 방식으로 ffmpeg 정보 얻기 (0) | 2020.08.18 |
알고리즘이 O (log n) 복잡성을 갖게하는 원인은 무엇입니까? (0) | 2020.08.18 |
C #의 DataTable에서 열 제거 (0) | 2020.08.18 |