하나의 SPAN 만 사용하여 CSS2의 각 줄에 패딩 (왼쪽 및 오른쪽)을 추가하는 방법은 무엇입니까? 교활한?

이 문제에 대한 해결책을 찾을 수 없습니다. 여기하나의 SPAN 만 사용하여 CSS2의 각 줄에 패딩 (왼쪽 및 오른쪽)을 추가하는 방법은 무엇입니까? 교활한?

는 내가 원하는 렌더링 것 :
http://jsfiddle.net/kQSxb/

HTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
</head> 
<body> 
    <div id="wrapper"> 
    <div id="container"> 
     <span>Lorem ipsum dolor sit amet,</span> 
     <span>consectetur adipisicing elit, sed</span> 
     <span>do eiusmod tempor incididunt.</span> 
    </div> 
    </div> 
</body> 
</html>

CSS :

#wrapper { 
    width: 600px; 
    height: 600px; 
    background-color: #eeeeee; 
    float: left; 
} 
#container { 
    width: 500px; 
    margin-top: 30px; 
    float: left; 
} 
#container span { 
    background-color: red; 
    padding-left: 20px; 
    padding-right: 20px; 
    font-size: 30px; 
    margin-bottom: 3px; 
    display: inline-block; 
}

가이 정확한 렌더링 (패딩은 왼쪽과 각각에 대한 권리가 가능한가요 라인, 각 라인 사이의 마진) 하나만 <span> (또는 <p> 또는 <div>)의 <div>#container에?

각 줄의 왼쪽과 오른쪽에 패딩을 추가하고 싶습니다.
그래서 단어 consectetur 와 할는 패딩을 떠난해야하며, 단어 는 AMET는 는을 나오지도 (도트)는 바로 패딩이 있어야합니다.

그렇지 않은 경우 CSS3 또는 jQuery 해킹으로 가능합니까?

감사합니다.

ps : 죄송합니다. 충분히 명확하지 않았습니다. 내 게시물을 수정했습니다. : -/

출처

2011-12-05 fro_oo

이것이 jQuery를 함께 할 수 있는가? 또한 질문에 코드를 게시하십시오. –

질문을 제대로 이해하지 못했습니다. 대체 패딩 오른쪽 및 왼쪽 싶지 ?? – FosterZ

내가 원하는 렌더링을 표시하기 위해 jsFiddle을 하나 더 추가하여 질문을 편집했습니다. 내 게시물에 전체 HTML + CSS를 붙여 넣으면 더 좋을 것이라고 생각하십니까? –

글쎄, 우리가 각 라인을 분리하는 또 다른 방법을 찾아야 그래서 CSS에서 할 불가능하다, 분명히 ...

을 내 대답입니다. 이 작업을 수행하는 방법은 마크 업과 스타일 시트를 약간 수정하고 문자열을 파싱하여 렌더링 된 각 줄의 범위를 만드는 것입니다.

미운 코드 :

String.prototype.spanify = function(nb_char) { 
    var regex = '.{1,'+nb_char+'}(\\s|$)|\\S+?(\\s|$)'; 
    return '<span>' + this.match(RegExp(regex, 'g')).join('</span><span>') + '</span>'; 
}; 

$.fn.titleize = function() { 
    var title = $(this).html(); 
    var title_calculated = '<span id="title" style="visibility: hidden; position: absolute;">' + title + '</span>'; 
    $('body').append(title_calculated); 
    var width = $(this).html(title).width() - 20; 
    var full_width = $('body').find('#title').width(); 
    $('#title').remove(); 
    var nb_lines = Math.floor(full_width/width); 
    var nb_char_per_line = Math.floor(title.length/nb_lines); 
    var new_title = title.spanify(nb_char_per_line); 
    $(this).html(new_title); 
} 
$('.title').titleize();

출처

2011-12-06 18:23:02

#container에 코드를 추가하면 문제가 해결됩니까? 당신은 #container에 패딩을 추가 할 수 있으며, 작업이 완료 http://jsfiddle.net/spacebeers/M3SKj/2/

출처

2011-12-05 12:08:22 SpaceBeers

답변 해 주셔서 감사합니다.하지만 불행히도, 이것은 제가 찾고있는 것이 아닙니다. 자세한 내용은 다른 jsFiddle을 확인하십시오. –

display: block;

여기에서 그것으로 코드입니다.

#container { 
    width: 260px; 
    margin-top: 30px; 
    float: left; 
    padding: 0 20px 0 20px; 
}

참조 : http://jsfiddle.net/M3SKj/1/

이 또한 내가 그냥 컨테이너 요소에 폭을 설정하여, 특정 라인 브레이크를 기대하기보다는 신뢰할 수없는 것 같아요. 그냥 2 센트.

출처

2011-12-05 12:09:11 Yoshi

이렇게하면 컨테이너가 너비보다 늘어납니다. 그 중 330px가 될 것입니까? –

@CharmingPrince 저는 이것을 설명하고 컨테이너 폭을 300px에서 260px로 줄였습니다. – Yoshi

답변 해 주셔서 감사합니다. 아니요, 해결책이 아닙니다. 좀 더 구체적인 질문을 편집했습니다. –

요시가 맞습니다. 그러나 Jquery로도 할 수 있습니다. 하지만 당신이 알아야 할, 그것은 절대적으로 우아한 해결책이 아닙니다.

$(document).ready(function(){ 
    $('#container').css('padding', '0px 20px 0px 20px'); 
});

아, 또한 스팬에서 패딩을 제거해야합니다. 패딩과 여백을 사용하는 경우 IE (6)은 box handling과 다릅니다.

출처

2011-12-05 12:23:51 tildy

대답 해 주셔서 감사합니다.하지만 불행히도, 이것은 제가 찾고있는 것이 아닙니다. 자세한 내용은 다른 jsFiddle을 확인하십시오. –

이것은 내가이 확실히 3.

단일 행 CSS 2와 가능성이없는 CSS에서 내 CSS에서 할 수 있다고 생각하지 않습니다 범위

#container span { 
    background-color: red; 
    padding-left: 20px; 
    padding-right: 20px; 
    display:block; 
}

출처

2011-12-05 14:46:16

답변 해 주셔서 감사합니다.하지만 불행히도, 이것은 내가 찾고있는 것이 아닙니다. 자세한 내용은 다른 jsFiddle을 확인하십시오. –

에 대한 업데이트 된 클래스 상자 모델을 적용한 후 브라우저 텍스트 렌더링 엔진에서 하나의 스팬을 생성합니다. 행을 개별적으로 선택하는 CSS 선택기가 없습니다.

원하는 것을 얻기위한 유일한 방법은 문자 수를 계산하고 줄 길이를 계산 한 다음 html 공백을 삽입하고 계산 된 줄 끝에 <br>을 삽입하는 것입니다.

출처

2011-12-06 12:07:28 cypherabe

그래, 나와 같은 결론. 그래서 렌더링 된 텍스트를 계산하는 자바 스크립트 조각에 대해 생각하고있었습니다. –

하나의 SPAN 만 사용하여 CSS2의 각 줄에 패딩 (왼쪽 및 오른쪽)을 추가하는 방법은 무엇입니까? 교활한?

답변

관련 문제