如何用固定宽度来包装htmlbutton的文本
我只是注意到,如果你给一个htmlbutton一个固定的宽度,button内的文本永远不会被包装。 我已经尝试过使用单词换行,但即使有可用的空间来包装这个词的削减。
我怎样才能使一个固定宽度的HTML包装像任何tablecell的文本将?
<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类什么都不做,只是添加边框并修改填充。 如果我在这个button上添加word-wrap:break-word,它会像这样包装它:
Roos Sturingen / Sen sors
如果有可能在单词之间切断,我不希望它在一个词的中间被切断。
谢谢
我发现你可以使用空白的CSS属性:
white-space: normal;
它会打破正常文本的话。
希望它有帮助。
你可以强制它(浏览器允许,我想象)通过在HTML源代码中插入换行符,如下所示:
<INPUT value="Line 1 Line 2">
当然,在哪里设置换行符并不一定是微不足道的…
如果您可以使用HTML <BUTTON>
而不是<INPUT>
,以便button标签是元素的内容而不是其value
属性,则将该内容放置在<SPAN>
,其width
属性比像素窄几个像素button的似乎做伎俩(即使在IE6 :-)。
我发现一个button的作品,但你会想要添加style="height: 100%;"
到该button,以便它将显示超过iPhone的iOS 5.1.1 Safari的第一行
white-space: normal; word-wrap: break-word;
我的工作与两个
像这样的多行button并不是很简单的实现。 这个网页有一个有趣的(虽然有点过时)讨论这个问题。 你最好的select可能是放弃多行要求,或者使用例如div
和CSS创build一个自定义button,并添加一些JavaScript来使它成为一个button。
word-wrap: break-word;
为我工作。
如果我们在<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的文本在类1数据上重叠,因为这两者都在单个button标记中。 我试图打破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属性,并完成我的任务。
希望将为所有工作!