를 공략할 수 ?를 공략할 수 ?를 공략할 수 ?CSS로?CSS로?CSS로?

programing

를 공략할 수 ?를 공략할 수 ?를 공략할 수 ?CSS로?CSS로?CSS로?

powerit 2023. 9. 10. 12:42

를 공략할 수 ?
CSS로?

이 로 을 이 을 로   CSS로 태그?

저는 줄이 끊어질 때마다 1px 대시 선을 가지고 싶습니다.저는 제 자신의 CSS로 사이트를 커스터마이징하고 있으며 설정된 HTML을 변경할 수 없습니다. 그렇지 않으면 다른 방법을 사용할 것입니다.

저는 불가능하다고 생각하지만 아마도 누군가가 알 수 있는 방법이 있을 것입니다.

기술적으로는, 네, 당신이 목표로 삼을 수 있는 것은 직접 또는 클래스를 적용하고 클래스를 대상으로 CSS가 있는 요소.,, a. 줄 바꿈을 생성하고 줄 바꿈일 뿐입니다.이 요소는 내용물이 없기 때문에, 그 위에 적용하는 것이 타당한 스타일은 거의 없습니다, 예를 들어 또는position. 설정 가능합니다. 테두리는 있지만 시각적인 차원이 없기 때문에 볼 수 없을 것입니다.

두 문장을 시각적으로 구분하고 싶다면 이 목표를 위해 사용할 수평 자를 사용할 수 있습니다.마크업을 변경할 수 없기 때문에 CSS만 사용하면 이를 달성할 수 없을 것 같습니다.

다른 포럼에서도 이미 논의가 된 것 같습니다.Re에서 추출: CSS를 사용하여 BR 요소의 높이 설정:

[T]그는 BR이 정상적인 요소로 취급되는 것이 아니라 생성된 콘텐츠에서 \A의 인스턴스로 취급되지만, 다른 한편으로는 CSS 속성의 제한된 부분 집합이 허용된다는 점에서 정상적인 요소로 취급됩니다.

또한 CSS 1 사양에서 명확성을 발견했습니다. (더 높은 수준의 사양은 언급하지 않음)

현재 CSS1 속성 및 값은 'BR' 요소의 동작을 설명할 수 없습니다.HTML에서 'BR' 요소는 단어 사이의 줄 바꿈을 지정합니다.실제로 요소는 줄 바꿈으로 대체됩니다.향후 버전의 CSS는 추가 및 교체된 콘텐츠를 처리할 수 있지만 CSS1 기반 포맷은 'BR'을 특별히 다루어야 합니다.

그랜트 와그너의 테스트에 따르면 스타일을 만들 방법이 없습니다.BR다른 요소들도 할 수 있는 것처럼.브라우저에서 결과를 테스트할 수 있는 사이트도 온라인에 있습니다.

펠름스는 몇 가지 추가 조사를 했고, IE8(Win7)과 Chrome 2/Safari 4b가 당신이 스타일링을 할 수 있게 해준다고 지적했습니다.BR어느 정도.그리고 실제로 IE Net Renderer의 IE8 엔진으로 IE 데모 페이지를 확인해보니 작동했습니다.

c69는 몇 가지 추가 조사를 했고, 당신은 그 마커를 스타일링 할 수 있다고 밝혀졌습니다.br상당히 무겁지만(교차하지는 않지만), 이는 라인 브레이크 자체에 영향을 미치지 않습니다. 왜냐하면 라인 브레이크는 상위 컨테이너에 속하기 때문입니다.

다음을 시도해 보세요. 저는 투표율이 높은 다른 답변의 업데이트 2를 사용하여 그것을 조립했고, 그것은 저에게 완벽하게 효과가 있었습니다.

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

당신이 스타일링 할 필요가 있는 한 가지 좋은 이유가 있습니다. 꼬리표를 매다

수 없는 코드의 이며 이 하고 할 의 이며 를 를 하고 이며  표시되지 않습니다.

.xxx br {display:none}

많은 시간과 때로는 하루를 절약할 수 있습니다.

제 의견을 놓쳤을 수도 있는 미래의 방문객들을 위해:

br {
    border-bottom:1px dashed black;
}

작동하지 않습니다.

IE 6, 7 & 8, 파이어폭스 2, 3 & 3.5B4, 윈도용 사파리 3 & 4, 오페라 9.6 & 10(알파), 구글 크롬(버전 2)에서 테스트를 거쳤으나 그 어느 것에서도 작동하지 않았습니다.약느의가에를는면를anrfta면를assrtt약t의neeee의를 element,.이,를게트요t요트게t,l,se를 .

그 외에도 여러 가지를 시도해 보았습니다.

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

이 중 오페라 9.6과 10(alpha)에서 작동하는 것은 다음과 같습니다. (감사합니다 porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

하나의 브라우저에서만 지원되는 경우에는 그다지 유용하지 않지만, 다른 브라우저가 사양을 구현하는 방법을 보는 것은 항상 흥미롭습니다.

br { padding: 1px 8px; border-bottom: 1px dashed #000 }

IE8에서 아래와 같이 렌더링...그러나 한 브라우저에서만 많은 사용이 가능하지는 않습니다.

(N.B. 차이가 있다면 IE 8.0.7100(Win7 RC에서)을 사용하고 있습니다.)

또한.

br:after { content: "..." }  
br { content: "" }`

아니면,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

Chrome 2 / Safari 4b에서 점선을 제공하지만 (누구라도 그것을 다시 도입할 수 있는 방법을 생각해낼 수 없는 한) 선이 끊어져 쓸모가 없습니다.

를 들면 예를 .
IE8 테스트, Chrome/Safari 테스트 및 기타 테스트

HTML 편집이 안 되는 건 알지만, CSS 수정이 가능하다면 자바스크립트를 추가할 수 있나요?

만약 그렇다면, 당신은 jquery를 포함할 수 있고, 그러면 당신은 할 수 있습니다.

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

업데이트 9/13/2019:

을 스타일링 목적  이와 같은 태그는 줄 바꿈(즉, 줄 사이에 약간의 여유 공간이 있음)을 만드는 것입니다.

66 60 42 및 11에서 "했습니다. Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 IE 11.48.17134.0 "oldbig" (아래 . 아쉽게도 크롬 버전 76과 그 파생 모델(2019년 8월경)에서 깨졌습니다.이 증상은 선 사이의 여유 공간이 더 이상 표시되지 않는 것입니다.

"newbig" 클래스는 최신 버전의 Chrome(76.0.3809.132), Opera, Firefox, Edge, IE, Brave 및 Palemoon에서 테스트되고 제대로 작동합니다.

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

데모는 다음과 같습니다.

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Chrome v.76에 표시된 결과입니다.

제 자신의 검사 결과는 결론적으로 다음과 같습니다.br태그는 CSS의 대상이 되는 것을 좋아하지 않습니다.(2023년 사파리에서도 여전히 해당)

그러나 스타일을 추가할 수 있다면 페이지의 머리글에 스크립트 태그를 추가할 수도 있습니까?부 크.js다음과 같은 일을 합니다.

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    const brs = element.querySelectorAll( 'br' );
    for ( let br of brs )
    {
        const hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

그래서 간단히 말해서, 최적은 아니지만, 여기 제 해결책이 있습니다.

BR은 블록 요소가 아닌 인라인 요소입니다.

그래서, 필요한 것은 다음과 같습니다.

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

그렇지 않으면 인라인 요소에 테두리, 패딩 또는 여백이 없기 때문에 이러한 것을 좀 더 까다롭게 다루는 브라우저는 BR 요소에 테두리를 적용하기를 거부합니다.

이렇게 하면 문제가 해결되는 것 같습니다.

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

오래된 질문이지만 이는 꽤 깔끔하고 깨끗한 해결책이며, 여전히 가능한지 궁금해하는 사람들에게 사용될 수 있습니다:)

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

이 수정을 통해 웹사이트에서 BR을 제거할 수도 있습니다(폭을 0px로 설정하기만 하면 됩니다).

이것은 IE에서만 작동합니다.IE8에서 테스트했습니다.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

. 에 태그를 달고 사용할 수 있었습니다.display:none;사용하지 않을 때를 조절하기 위해 미디어 쿼리를 사용하여 태그를 지정합니다.

가장 실용적이고 짧은 해결책은 그다지 대중적이지 않은 HTML 태그를 사용하는 것입니다.

<style>
blockquote {margin: 7px 0px 0px 0px;}
</style>

This is my first line
<blockquote/>
Second line with a half height break

사용하다고정된 키를 건너뛰게 됩니다.의미론이 맞습니다. p 스타일을 합니다:는에게을다을다게ep에는erupe .p {margin-bottom: 1rem}. .5rem은 다음과 같이 작동합니다. 인 선 간격에 잘 1rem은 인 에 합니다 합니다 에 인 .원하는 대로 거기서부터 늘립니다.하다 줄 바꿈에 한해서만

CSS 101입니다.

왜 간단한 일들을 그렇게 어렵게 만드나요? 사용합니까? 사용 이유
처음에?

글을 쓸 때 입력/복귀를 누르고, 한 줄 한 줄 한 줄 뒤에 새로운 문단을 시작하는 것이 훨씬 수월하지 않습니까?

패딩과 여백을 제한하여 을 사용한 것처럼 만들 수 있습니다.그런 다음 CSS에서 하단 테두리 스타일을 p 선택기로 설정합니다.

텍스트의 마지막 줄에 밑에 점선을 두지 않으려면 텍스트 줄 사이에만 ID를 추가합니다(시각적으로 구분).

텍스트의 마지막 줄만 태그하고 CSS를 작성합니다.

여기서 보기:

p {
  padding-bottom: 10px;
  margin-top: 0px;
  margin-bottom: 10px;
  border-bottom: dashed 2px #777;
  }
  
 p#lastLine {
 border-bottom: none;
 }

<p>
This is a line of some very nice text. And mind you, this is no joke!
</p>
<p >
And this is another line of some very nice text. 
</p>
<p >
And this is another line of some very nice text. 
</p>
<p >
And this is another line of some very nice text. 
</p>
<p id="lastLine">
And this THE LAST LINE line of some very nice text. This is great!
</p>

HR 태그만 사용하면 어떨까요?당신이 원하는 것에 딱 맞게 만들어졌습니다.테이블 위에 숟가락이 놓여있을 때 수프를 먹기 위해 포크를 만드는 것과 같습니다.

언급URL : https://stackoverflow.com/questions/899252/can-you-target-br-with-css

'programing' 카테고리의 다른 글

CSS를 사용하여 글꼴 .ttf를 포함하는 방법? (0)	2023.09.10
동결과 밀봉의 차이 (0)	2023.09.10
문자 포인터에 malloc을 사용할 때 (0)	2023.09.10
8.4.0으로 버전 충돌 업데이트 (0)	2023.09.10
Windows 탐색기와 동일하게 파일 이름별로 정렬하는 방법은 무엇입니까? (0)	2023.09.10

현재글를 공략할 수 ?를 공략할 수 ?를 공략할 수 ?CSS로?CSS로?CSS로?

각종 프로그래밍 정보를 다루는 블로그입니다.

reactjs, bash, Excel, ajax, MYSQL, Oracle, spring-boot, mongodb, angularJS, mariadb, git, Wordpress, ASP.NET, python, c, jquery, Android, sql-server, json, PowerShell,

Today :
Yesterday :

powerit