选择标签分手一个字

我有一个网页和选择标签的形式打破了它里面的文字不适当这样的：选择标签分手一个字

这是分手的作品“银行“ 因为某些原因。我试图阻止这与de CSS属性word-break: keep-all，但它什么都不做。

的HTML和CSS是这样的：

<select name="your-Detalle" 
     class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required" 
     aria-required="true" 
     aria-invalid="false"> 
    <option value="">---</option> 
    <option value="Operaciones con Tarjeta de Débito"> 
    Operaciones con Tarjeta de Débito 
    </option> 
    <option value="Operaciones con Tarjeta de Crédito"> 
    Operaciones con Tarjeta de Crédito 
    </option> 
    <option value="Operaciones de Internet Banking"> 
    Operaciones de Internet Banking 
    </option> 
</select>

select { 
    font-family: Futura-medium; 
    font-size: inherit; 
    line-height: inherit; 
    height: 60px; 
    width: 200px; 
    border: none; 
    background-color: #F2F2F2; 
    margin-bottom: 10px; 
    color: #666666; 
    padding-left: 5%; 
    font-weight: bold; 
    word-break: keep-all; 
}

我不知道，如果是相关的，但整个形式在WordPress与联系表做7

编辑

如果添加属性white-space: nowrap;它吞下溢出：

来源

2015-10-09 David Prieto

是'200px'宽度变化的好？如果你不想让它破碎，你需要使用'white-space：nowrap'。但是这会隐藏长文本。没有其他方式可以显示选择框中的所有文本，而不会使选择框更宽。 – ntgCleaner

是的，这是因为你的输入字段有固定的宽度 – Adjit

如果你尝试了分词，那么你应该明白，由于元素的宽度，单词Banking不适合它的父容器。这可能是一个好主意，使用连字符与您的分词属性，如下所示：https://css-tricks.com/almanac/properties/w/word-break/ – AGE

我不知道它是你的容器select多么重要的是有一个固定的宽度200px，但这会导致文本行中断。有两种解决方案供您选择：

更改width: 200px到min-width: 200px这将扩大在你的选择框选项的文本的宽度。
添加word-break: break-word和hyphens: auto属性，你的CSS ...这可能帮助，但肯定不会看起来像什么，我就写选项1.

来源

2015-10-09 20:08:10 AGE

尝试添加空白属性为您select CSS类：

select { 
    /*... other properties ...*/ 
    white-space: nowrap; 
}

来源

2015-10-09 19:47:06 CreativePS

它吞没溢出。我会编辑一个图像的帖子。 –

如果可以，请分享网址@DavidPrieto – CreativePS

对不起，我不能@CreativePs –

选择标签分手一个字

回答

相关问题