Question

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

因此，我使用了CSS属性：空白：正常，我尝试了所有其他操作均未成功，因为它不会扭曲所有文本，因此文本的最后一部分丢失了。

这里的结果没有空格：

这里的结果带有空格：

有人知道为什么当我用空格对文本进行扭曲时为什么我没有得到全文吗？

这是带有一个输入示例的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;

Answer 1

您为.menu_description_no设置了固定高度24px

尝试添加：

.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;
}

Answer 2

如果我对问题的理解正确，则input[type=button]内的文本将被剪切掉，并且不会很好地包裹在按钮内。要解决此问题，您需要在CSS代码中做几件事：

 .menu_description_no {
        display: flex;
        background-color: #BBE0EA;
        height: auto;
        width: 200px;
        cursor: pointer;
        border-bottom-color: #1D384F;
        color: #284a71;
        font-weight: bold;
        text-align: center;
        white-space:normal;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <a href="">
    <input type="button" class="menu_description_no" value="first Button first Button first Button first Button" />
    <input type="button" class="menu_description_no" value="Second Button Second Button Second Button Second Button" />
                        
  </a>
</body>
</html>

在向这些元素添加display flex时，元素“ flexes”内的所有内容都会很好地包裹起来。这是height: auto的补充，width: 200px会根据内容自动调整高度，而固定的{{1}}则包含文本内容的宽度（在您选择的值之内）（200px只是为了说明）。

CSS空格剪切文本输入值的结尾

2 个答案: