줄 바꿈에 문자 추가

안녕하세요. 목록 (ul)과 일부 "li"이 있습니다.줄 바꿈에 문자 추가

Javascript (jQuery)를 사용하면 줄 바꿈을 감지하고 시작 부분에 문자를 어떻게 추가합니까?

I have a very looooong text in 200px width li.

결과는 다음과 같습니다 :

I have a very looooong text 
in 200px width li.

그리고 난 새로운 라인의 시작 부분에 "+"추가 할 => 결과 :

I have a very looooong text 
+ in 200px width li.

그래서 예를 들면

thx

출처

2011-03-14 ajitam

가능한 중복 (HTTP : // 유래. com/questions/4671713/detection-line-breaks-with-jquery) –

이것은 내 질문에 대한 답변 일종의 미안합니다. – ajitam

andyb의 답변이이 목적을 위해 훨씬 더 잘하기 때문에 답변으로 게시하지 않을 것이지만 Aron과 연결된 복제본에 해결책을 게시했습니다. –

이 발생할 수있는 영향을 미칠 것인가? 데모 - http://jsfiddle.net/FDD7n/

크롬 11에서 나를 위해 근무 이것은 글꼴 크기에 따라 일부 조정이 필요할 수 있습니다 :) [jQuery로 줄 바꿈을 감지?]의

출처

2011-03-14 21:37:43 andyb

좋은 문제, 어려운 문제에 대한 간단한 해결책 – rsplak

정확히 내가 뭘 찾고 있었는지! 고마워 – ajitam

힘든 부분은 다음과 같습니다. n idea : 동일한 CSS 속성을 가진 li과 동일한 위치에있는 여분의 div를 만들어 보겠습니다. 리에 15px의 패딩 왼쪽을 둡니다. li이 1 라인보다 높은 각 라인에 대해 새로운 div를 +로 채 웁니다.

var plusses = $('li').height()/$('li').css('line-height').slice(0,-2); //number of lines 
var i = 1; 
var sLines = '<br />'; // the first line doesn't need a + 
while(i < plusses) { 
    sLines+='+<br />'; // every other line does 
    i++; 
} 
$('#newdiv').html(sLines);

그런 다음해야 할 일은 css'ing the bunch!

출처

2011-03-14 20:03:04 rsplak

부모의 너비가 충분하지 않아서 브라우저가 별도의 줄에 텍스트를 배치하기로 결정하면 아마도 그 방법을 찾을 수 없습니다. 자신이 HTML에서 줄 바꿈을 만들면 "\ n"을 찾아 "\ n +"로 바꿀 수 있습니다. 예를 들어, 텍스트 너비 (Calculating text width)를 계산하고 부모 너비와 비교하여 확인할 수 있습니다. 그러나 브라우저가 줄 바꿈을 결정하는 위치를 쉽게 추측 할 수는 없습니다.

출처

2011-03-14 20:03:18 mattsven

내가 생각할 수있는 유일한 방법은 (브라우저가 공백을 감싸는 것으로 가정하면) 스팬의 모든 단어를 랩핑 한 다음 프로그래밍 방식으로 y pos의 트랙을 유지하는 형제를 반복합니다. y pos에 중대한 변화가있는 경우, 아마도 랩핑했을 것입니다 ... 그래서 "+"를 추가하고 반복을 계속하십시오.

곰 염두에 추가, "+"아마 문자열의 나머지뿐만 아니라 포장 것입니다 및 방법 순수 CSS에서 뭔가에 대해 추가로 줄 바꿈

출처

2011-03-14 20:14:27 Damp

줄 바꿈에 문자 추가

답변

관련 문제