인라인 블록 요소 앞에 줄 바꿈을하지 마십시오.

Question

인용 부호를 표시하고 싶습니다. 따옴표의 시작과 끝 모두에는 배경 이미지로 표시되는 따옴표가 있습니다. 시작 인용 부호와 인용 부호의 첫 단어 사이 또는 인용 부호의 마지막 단어와 끝 인용 부호 사이에 줄 바꿈이 없어야합니다. 이것을 달성하기 위해 나는 white-space: nowrap;을 사용해 보았습니다.

<div class="quote"> 
    <span class="quote-start"></span> 
    <span class="quote-text">text that is wrapped over several lines</span> 
    <span>&#xfeff;</span> 
    <span class="quote-end"></span> 
</div> 

.quote { 
    width: 10px; 
    white-space: nowrap; 
    background: red; 
} 
.quote-text { 
    white-space: normal; 
} 
.quote-start, 
.quote-end { 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    background: blue; 
} 

당신이 CodePen에서 테스트 할 수 있습니다 : 다음 코드가 난 후 무엇을한다.

그러나 추악한 일없이 이것을 할 수있는 방법이 있습니까 <span>&#xfeff;</span>?

Answer 1

의사 요소 전후에 할 수 있습니다. 너 이걸 원해? codepen을 확인하고 회신하십시오. http://codepen.io/SESN/pen/MeeaGp

.quote { 
    width: 10px; 
    white-space: nowrap; 
    background: red; 

} 
.quote:before, .quote:after { content: ""; position: relative; background: url(http://1axcbc2mo5e72fuf7p2ouonc.wpengine.netdna-cdn.com/wp-content/uploads/2012/01/left-quotation-marks.png) no-repeat; background-size: contain; padding: 0px 5px 0px 10px; 
} 

.quote:after { } 
.quote-text { 
    white-space: normal; 
} 
.quote-start, 
.quote-end { 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    background: blue; 
}