html - CSS white-space 剪切文本输入值的结尾

Question

我有一个我想要扭曲文本的输入列表，因为它是元素末尾的裁剪。

所以我使用了 CSS 属性： white-space: normal 并且我尝试了所有其他属性都没有成功，因为它不会扭曲所有文本，文本的最后部分丢失了。

这里没有空格的结果：

这是带有空格的结果：

有谁知道为什么当我用空格扭曲文本时我没有得到全文？

这是我的带有一个输入示例的html：

<a href="<?php echo url_for('candidature/saisirPage?id_page='. $page['id_page']) ?>">
    <?php if($culture == 'en_US' && $page['intitule_en'] != null): ?>
        <input type="button" class="menu_description_no" value="<?php echo $page['intitule_en'];?>" />
    <?php else : ?>
        <input type="button" class="menu_description_no" value="<?php echo $page['intitule_fr'];?>" />
    <?php endif;?>
</a>

这是我的课CSS：menu_description_no

.menu_description_no {
    background:url(/sigap/web/images/with-shadows/badge-square-cross-24.png) left no-repeat;
    background-color: #BBE0EA;
    height: 24px;
    padding: 0px 180px 0px 30px;
    cursor: pointer;
    //border-top-color: #1D384F;
    border-bottom-color: #1D384F;
    color: #284a71;
    font-weight: bold;
    text-align: left;
    white-space:normal;
}

更新 ：

更新 2：带填充：0px 10px 0px 30px；

标签： htmlcss

Answer 1

你给了固定高度 24px.menu_description_no

尝试添加：

.menu_description_no {
    background:url(/sigap/web/images/with-shadows/badge-square-cross-24.png) left no-repeat;
    background-color: #bbe0ea;
    min-height: 24px;
    padding: 0px 180px 0px 30px;
    cursor: pointer;
    //border-top-color: #1d384f;
    border-bottom-color: #1d384f;
    color: #284a71;
    font-weight: bold;
    text-align: left;
    white-space:normal;
}