2014-09-04 132 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的领导和每个想要帮助的人。