我对换行有疑问。如屏幕截图1所示,文本很好,但是当浏览器被拉下时(屏幕截图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/
最佳答案
你可以试试看吗?我已经举了我的榜样为我工作。
您已给跨度显示块。
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>