我刚注意到,如果你给一个固定宽度的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
如果可以在单词之间切断它,我不希望它在一个单词的中间切断。
答案 0 :(得分:485)
我发现你可以使用白色空间CSS属性:
white-space: normal;
它会将这些单词视为普通文本。
答案 1 :(得分:9)
white-space: normal;
word-wrap: break-word;
我的工作与
答案 2 :(得分:8)
您可以通过在HTML源代码中插入换行符来强制它(浏览器允许,我想),如下所示:
<INPUT value="Line 1
Line 2">
当然,找出换行符的位置并不一定是微不足道的......
如果您可以使用HTML <BUTTON>
而不是<INPUT>
,那么按钮标签是元素的内容而不是value
属性,将该内容放在{{1}中使用<SPAN>
属性比按钮的像素窄几个像素似乎可以解决问题(即使在IE6中: - )。
答案 3 :(得分:6)
我发现按钮有效,但您要将style="height: 100%;"
添加到该按钮,以便它显示的内容超过Safari for iPhone iOS 5.1.1上的第一行
答案 4 :(得分:2)
如果我们在<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属性并完成任务后。
希望对所有人都有用!!!
答案 5 :(得分:1)
这样的多行按钮实现起来并不是很容易实现。 This page有一个关于这个主题的有趣(虽然有点过时)的讨论。您最好的选择可能是放弃多线要求或使用例如创建自定义按钮。 div
和CSS,并添加一些JavaScript以使其作为按钮工作。
答案 6 :(得分:1)
word-wrap: break-word;
为我工作。
答案 7 :(得分:1)
michael_s;jpa;NYC
john_d;chn;TXS
jim_h;usa;POP
“Both”为我工作。