단락 태그 내에서 줄이 차단됨

Question

단락 내의 텍스트 줄을 강조 표시하거나 채울 방법을 찾고 있습니다. 그게 중요하다면 나는 wordpress에서 개발 중이다.

<p> this is a line 
This is a line a little longer 
Just a short one 
a really really long one that is longer than any 
a medium sized one to end it</p> 

내가 모든 라인 텍스트의 길이를 간다 검정색 배경을 갖고 싶어 : 여기

는 예제 코드입니다. 각 P의 스타일을 지정할 수 없기 때문에 줄이 1P 태그에만 줄 바꿈되었습니다.

자습서에 대한 아이디어가 있습니까? 나는 각 라인을 P로 만들기 위해 jquery에 의지 할 필요는 없다고 생각하지만 opiton이라면 그렇게 할 것이다.

Answer 1

표시 할 단락을 인라인으로 설정하고 배경색을 추가하는 것이 가장 쉬운 방법입니다.

p { 
    display: inline; 
    color: white; 
    background-color: black; 
} 

및 단락이 될 것입니다 : 당신이해야 할 것되도록

<p> this is a line<br/> 
This is a line a little longer<br/> 
Just a short one<br/> 
a really really long one that is longer than any<br/> 
a medium sized one to end it</p> 

Answer 2

브라우저가 하나의 공간으로 줄 바꿈을 치료 당신은 선하지만 각 라인의 끝에 휴식 추가해야 HTML을 수정합니다.

Javascript와 줄 바꿈이 어디에 있는지 알 수 없을 것입니다. 이 경우 HTML을 직접 수정해야하며 기본적으로 Pat이 제안한 것을 수행해야합니다.

Answer 3

jquery를 사용하면 wrapInner 기능을 사용하여 특정 태그의 내용을 HTML로 간단하게 래핑 할 수 있습니다.

당신은 단락에만이 같은 예를 들어, 그 특정 인라인 요소에 CSS를 적용 할 필요가

$("p").wrapInner("<span></span>");

의 내용 주위에 인라인 요소 (예 : 스팬)을 넣어합니다.

p span { 
    background-color: black; 
    color: white; 
}

이 솔루션을 사용하면 HTML을 편집 할 필요가 없습니다.