代码之家 › 专栏 › 技术社区 › Mathieu Mourareau

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

css html

Mathieu Mourareau · 技术社区 · 7 年前

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

所以我使用了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>

这里是我的班级: 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;

3 回复 | 直到 7 年前

Ced 7 年前

你给了固定高度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;
}

rags2riches-prog 7 年前

如果我正确理解了这个问题,那么 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添加到这些元素时,元素中的所有内容都会“弯曲”并很好地包裹起来。这是除了 height: auto 根据内容和固定长度自动调整高度 width: 200px 它包含您选择的值内的文本内容宽度(200px仅用于说明)。