线没有正确断开

Question

我遇到了断线问题。正如您在屏幕截图1中看到的那样，文本很好但是当浏览器被拉下来时（屏幕截图2），文本会在随机点处中断，而不是通过单词留下大的空白区域。理想情况下，我希望每个单词在需要的时候掉落，而不是一次性掉落所有四个单词。

此div上没有填充或边距。我尝试过以下自动换行变量：normal，break-word，initial＆amp;继承。我也尝试过白色空间：正常，无包裹，前置，初始和放大继承没有成功。

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/

Answer 1

你可以尝试一下吗？我已经举出了我的榜样。

您已为span提供显示块。

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>

Answer 2

客户端在Wordpress的后端错误地格式化了文本，导致错误（不确定如何）。我只是完全删除了他们的文本并重新键入它以删除现在有效的格式。感谢@HiddenHobes的提醒和所有想要帮助的人。