2014-09-04 5 views
1

줄 바꿈 문제가 있습니다. 스크린 샷 1에서 볼 수 있듯이 텍스트는 괜찮지 만 브라우저가 아래로 당겨지면 (스크린 샷 2) 단어가 큰 공백을 남기지 않고 임의의 지점에서 텍스트가 깨집니다. 이상적으로는 한 번에 4 개의 단어가 모두 떨어지는 것이 아니라 필요할 때 각 단어를 떨어 뜨리고 싶습니다. 라인이 올바르게 깨지지 않음

Screenshot 1

Screenshot 2

이 사업부에 패딩이나 마진이 없다. 다음과 같은 단어 줄 바꾸기 변수를 시도했습니다 : normal, break-word, initial & inherit. 나는 공백을 시험해 보았다 : 보통, 노 랩핑, 프리, 초기 &은 성공하지 못한다.

HTML/PHP :

<div class="full bottom-position"> 

    <div class="half right"> 

     <?php if (get_sub_field('client_name')) : ?> 

       <span class="left-span">Client:</span> 
       <span class="right-span"><?php the_sub_field('client_name'); ?></span> 

     <?php endif; ?> 


     <?php if (get_sub_field('date')) : ?> 

       <span class="left-span">Date:</span> 
       <span class="right-span"><?php the_sub_field('date'); ?></span> 

     <?php endif; ?> 


     <?php if (get_sub_field('version')) : ?> 

       <span class="left-span">Version:</span> 
       <span class="right-span"><?php the_sub_field('version'); ?></span> 

     <?php endif; ?> 


     <?php if (get_sub_field('print')) : ?> 

       <span class="left-span">Print:</span> 
       <span class="right-span"><a href="<?php the_sub_field('print'); ?>">Download presentation as PDF</a></span> 

     <?php endif; ?> 

    </div> 

</div> 

CSS :

.left-span { 
    width: 15%; 
    float: left; 
} 

.right-span { 
    width: 85%; 
    float: left; 
} 

.half { 
    width: 50%; 
    height: auto; 
} 
.right { 
    float: right; 
} 

이것은 내가 전에 건너 적이 이상한 문제입니다. 어떤 도움을 주시면 감사하겠습니다. 피들은 여기에서 찾을 수 있습니다 : http://jsfiddle.net/qkt93epw/

+0

코드를 게시 할 수 있습니까? –

+0

'word-wrap : break-word;'? – Benjamin

+1

[fiddle] (http://jsfiddle.net/) 코드를 사용할 수 있습니까? – Benjamin

답변

0

시도해 볼 수 있습니까? 나는 내 모범이 나를 위해 일해 주었다.

스팬에 표시 블록을 지정했습니다.

span { 
    width:10px; /*You can change your width*/ 
    white-space: normal; 
    display:block; 
} 

HTML

<span> 
    This is test. This is test.. This is test.. This is test.. This is test.. This is test.. This is test.. This is test.. This is test.. This is test.. This is test. 
</span> 
+0

도움을 주셔서 감사합니다.하지만 Wordpress 백엔드에서 서식 오류가 발생했습니다. – holloway

0

클라이언트 오류의 원인이 된 워드 프레스의 백 엔드 (방법을 잘 모르는) 잘못 텍스트를 포맷. 나는 단순히 텍스트를 완전히 제거하고 다시 형식을 지정하여 현재 작동하는 형식을 제거합니다. @HiddenHobes에게 도움을 주신 모든 분들께 감사드립니다.

관련 문제