Keep : after 동일 행의 요소

텍스트 단락 앞뒤에 인용 부호를 추가하려면 font-awesome을 사용하고 있습니다. 화면의 너비에 따라 : after 가상 클래스의 끝 따옴표가 모두 다음 줄로 푸시 될 수 있습니다.Keep : after 동일 행의 요소

아이콘이 마지막 단어에 계속 연결되어 있으면 다음 줄로 이동해야하는 경우 최소한 한 단어 씩 가져 오는 방법이 있습니까?

예 : 예를 들어

<p class="testimonial"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut velit luctus, convallis ante eget, sodales leo. Curabitur viverra a elit id rutrum. Nunc egestas massa ac convallis eleifend. Nulla semper mi non aliquet ultrices. 
</p> 

.testimonial { 
    font-style: italic; 
    font-weight: 400; 
} 

.testimonial:before { 
    font-family: 'FontAwesome'; 
    content: '\f10d'; 
    font-size: 30px; 
    vertical-align: middle; 
    margin-right: 0.4em; 
    color: #9bc2e2; 
} 

.testimonial:after { 
    font-family: 'FontAwesome'; 
    content: '\f10e'; 
    font-size: 30px; 
    vertical-align: middle; 
    margin-left: 0.4em; 
    color: #9bc2e2; 
}

참조 jsfiddle :이 점 끝나는 문장 사이의 공백이고 </p> 느릅 나무가 다음 줄에 https://jsfiddle.net/3qjro1pj/

출처

2016-06-06 user5633550

. 그것이 랩핑하는 이유입니다.

</p>을 같은 줄에두기 만하면됩니다.
공간이 필요하면  을 사용하십시오. https://jsfiddle.net/Bes7weB/3qjro1pj/4/

출처

2016-06-06 03:30:12

그래서 간단하지만 그것이 완벽하게 작동합니다 :

여기에 업데이트 된 바이올린하세요! 내가 그걸 몰랐다는 것을 믿을 수 없어! – user5633550

이 솔루션을보고있는 다른 사람들을 위해 나는 공백이 제거 되더라도 감탄 부호로 끝나는 문장이 아이콘을 다음 단계로 밀어 넣는 것처럼 보인 것처럼 내용 뒤에있는 nbsp을 넣는 것을 끝내었다. https://jsfiddle.net/3qjro1pj/5/ – user5633550

Keep : after 동일 행의 요소

답변

관련 문제