2014-09-04 73 views
1

我有一個線路中斷的問題。正如你在截圖1中看到的那樣,文本沒問題,但是當瀏覽器被拉下時(截圖2),文本在隨機點突破,而不是通過單詞留下大的空白區域。理想情況下,我希望每個單詞在需要的時候放下,而不是全部四個單詞一起放下。線路不正確

Screenshot 1

Screenshot 2

有關於這個div沒有填充或保證金。我已經嘗試了以下換行變量:正常,破解詞,初始&繼承。我也嘗試了空白:正常,無包裝,前,&繼承沒有成功。

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

請問您可以發佈代碼嗎? – 2014-09-04 12:14:57

+0

'word-wrap:break-word;'?. – Benjamin 2014-09-04 12:16:55

+1

你可以[小提琴](http://jsfiddle.net/)你的代碼。 – Benjamin 2014-09-04 12:18:55

回答

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 2014-09-04 17:41:01

0

客戶在WordPress的後端這是導致錯誤(不知道如何)格式不正確的文本。我只是完全刪除他們的文本,並重新輸入它以刪除現在可以使用的格式。感謝@HiddenHobes的領導和每個想要幫助的人。