首页 文章

如何用固定宽度包装html按钮的文本

提问于
浏览 次
172

我只是注意到，如果你给一个固定宽度的html按钮，按钮内的文本永远不会被包装 . 我已经尝试过自动换行，但即使有可用的空间，也可以剪掉这个词 .

如何使用像任何tablecell一样的固定宽度换行的html按钮的文本？

<td class="category_column">
    <input type="submit" name="ctl00$ContentPlaceHolder1$DataList1$ctl12$ProCat_NameButton" 
           value="Roos Sturingen / Sensors" 
           id="ctl00_ContentPlaceHolder1_DataList1_ctl12_ProCat_NameButton" 
           class="outset" 
           style="height:118px;width:200px;font-size:18px;color:#7F7F7F;width:200px;white-space:pre;" />
</td>

除了添加边框和修改填充之外，css类什么都不做 . 如果我将word-wrap：break-word添加到此按钮，它将像这样包装：

Roos Sturingen / Sen
sors

如果可以在单词之间切断它，我不希望它在一个单词的中间切割 .

谢谢

html css button wrapping

8 回答

  • 474

    我发现你可以使用white-space css属性：

    white-space: normal;

    它会将这些词语视为普通文本 .

    希望能帮助到你 .

    回复于
  • 6

    您可以通过在HTML源代码中插入换行符来强制它（浏览器允许，我想），如下所示：

    <INPUT value="Line 1
Line 2">

    当然，找出换线的位置并不一定是微不足道的......

    如果您可以使用HTML <BUTTON> 而不是 <INPUT> ，使得按钮标签是元素的内容而不是其 value 属性，将该内容放在 <SPAN> 内，其 width 属性比按钮的像素窄几个像素似乎诀窍（即使在IE6 :-) .

    回复于
  • 8
    white-space: normal;
word-wrap: break-word;

    我的两个都适用

    回复于
  • 2

    我发现一个按钮有效，但你要将 style="height: 100%;" 添加到该按钮，这样它将显示超过Safari for iPhone iOS 5.1.1的第一行

    回复于
  • 1

    如果我们在 <button> 标签内部有一些内部分区，就像这样 -

    <button class="top-container">
    <div class="classA">
       <div class="classB">
           puts " some text to get print." 
       </div>
     </div>
     <div class="class1">
       <div class="class2">
           puts " some text to get print." 
       </div>
     </div>
</button>

    有时类A的文本在class1数据上重叠，因为它们都在单个按钮标记中 . 我尝试使用以下方式打破tex

    word-wrap: break-word;         /* All browsers since IE 5.5+ */
 overflow-wrap: break-word;     /* Renamed property in CSS3 draft spec */

    但这不行，那我试试这个 -

    white-space: normal;

    删除上面的CSS属性后，完成了我的任务 .

    希望对所有人都有用!!!

    回复于
  • 1

    像这样的多行按钮实现起来并不容易 . This page有一个关于这个主题的有趣（虽然有点过时）的讨论 . 您最好的选择可能是放弃多线要求或使用例如创建自定义按钮 . div 和CSS，并添加一些JavaScript以使其作为按钮工作 .

    回复于
  • 1
    word-wrap: break-word;

    为我工作 .

    回复于
  • 7
    white-space: normal;
   word-wrap: break-word;

    “两个”对我有用 .

    回复于

相关问题