jQuery로 특정 기호 다음에 텍스트 줄 바꿈

Question

내가하려는 것은, ll 태그 안에서 div로 텍스트를 줄 바꿈하는 것입니다. 그것은 문제가되지 않지만 "-"(마이너스) 뒤에 "마이너스"를 포함하여 나타나는 텍스트를 감쌀 필요가 있습니다.

이 내 HTML입니다 :

<ul> 
    <li>Some list text - Additional text</li> 
</ul> 

내가이 달성하기 위해 노력하고있어 그 결과 :

<ul> 
    <li>Some list text <span class="after">- Additional text<span></li> 
</ul> 

사람이 제발 도울 수있을 것입니다 것인가?

미리 감사드립니다.

Answer 1

뭔가를해야한다.

Answer 2

궤도에있는 것처럼 들릴 수 있습니다.

<span class='after' style='display: block;'>...</span> 

을 그리고 그것을 않는 경우 참조 : 블록 수준 요소 때문에 같은 span합니다.

아, 다음 스타일 시트에 그 인라인 스타일을 이동 :

Answer 3

이 모든 전에 LINEBREAK을 삽입합니다 - 목록 항목에서.

Answer 4

단순한 정렬되지 않은 목록 대신 설명적인 목록을 만드는 것처럼 보입니다. 당신은 하나의 요소 내에서 모든 텍스트를 유지해야하는 경우 나는 확실히 누군가가 괜찮은 솔루션을 게시 할 예정 해요,하지만 ul과 같이 이유를 대신 dl를 사용하지 :이 같은 효과를 달성한다

<dl> 
     <dt>Some list text</dt> 
     <dd>- additional text</dd> 
<dl> 

새 줄에 "-"기호 다음에 텍스트를 표시하려고 시도하고, <dt> 및 <dl> 요소의 여백과 여백을 수정하여 줄 모양이되도록 정렬 할 수 있습니다. 목록 항목 (<dt>)을 설명하는 추가 목록이있는 설명 목록을 작성하는 경우 (<dd>) 다른 방법을 사용하여 동일한 항목을 근사하는 것보다 내게 필요한 옵션에 대한 의미를 암시하는 것이 좋습니다.

편집 : 사람이 내가 질문 jQuery를 사용하여 솔루션을 요구하는 것이,이 솔루션은 jQuery를 사용하지 않는 것을 알고 아무것도 말한다 전에. 그러나 여기서 의도가 설명 목록을 대략적으로 표현하는 것이라면 jQuery 마법을 사용하는 것보다 의미 론적으로 HTML에 코드를 작성하는 것이 낫습니다.

Answer 5

다음과 같이해야합니다. 여기 브라우저에서 건조 코딩되어 있으므로 테스트가 필요합니다. 이 같은

$('ul li').each(function() { 
    var parts = $(this).html().split('-', 1); 

    $(this).html(parts[0]); 
    if (parts.length == 2) { 
     $(this).append(" - " + parts[1]); 
    }  
}); 

Answer 6

$.each($("li:contains('-')"),function(i,n){ 
    n.innerHTML = n.innerHTML.replace('-','<span class="after">-')+"</span>" 
});