如何以固定宽度包裹 HTML 按钮的文本？

发布于 2024-07-19 17:21:46 字数 759 浏览 6 评论 0原文

我刚刚注意到，如果您为 HTML 按钮指定固定宽度，则按钮内的文本永远不会换行。我已经尝试过自动换行，但是即使有空格可以换行，单词也会被剪切。

如何使 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

如果可以剪切，我不希望它在单词中间剪切它在言语之间消失。

原文

I just noticed that if you give an HTML button a fixed width, the text inside the button is never wrapped. I've tried it with word-wrap, but that cuts of the word even though there are spaces available to wrap on.

How can I make the text of an HTML button with a fixed width wrap like any tablecell would?

<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>

The CSS classes do nothing but adding borders and modify the padding.
If I add word-wrap:break-word to this button, it will wrap it like this:

Roos Sturingen / Sen
sors

And I don't want it to cut of in the middle of a word if it is possible to cut it off between words.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

电影里的梦 2024-07-26 17:21:46

   white-space: normal;
   word-wrap: break-word;

“两者”都对我有用。

   white-space: normal;
   word-wrap: break-word;

"Both" worked for me.

回复收藏 0 原文

巾帼英雄 2024-07-26 17:21:46

我发现一个按钮可以工作，但您需要将 style="height: 100%;" 添加到该按钮，以便它在 iPhone iOS 的 Safari 上显示的内容不仅仅是第一行5.1.1

回复收藏 0 原文

樱花细雨 2024-07-26 17:21:46

像这样的多行按钮实现起来并不简单。此页面有一个有趣的（尽管有些过时）讨论主题。您最好的选择可能是放弃多行要求，或者使用 div 和 CSS 创建自定义按钮，并添加一些 JavaScript 使其作为按钮工作。

回复收藏 0 原文

丑疤怪 2024-07-26 17:21:46

如果我们在

<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 数据上重叠，因为它们都在单个按钮标签中。
我尝试使用 -

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

但这不会起作用，然后我尝试这个 -

white-space: normal;

在删除上面的 css 属性并完成我的任务后。

希望对大家有用！

If we have some inner divisions inside <button> tag like this-

<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>

Sometime Text of class A get overlap on class1 data because these both are in a single button tag.
I try to break the tex using-

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

But this won't worked then I try this-

white-space: normal;

after removing above css properties and got my task done.

Hope will work for all !!!

回复收藏 0 原文

烟雨扶苏 2024-07-26 17:21:46

word-wrap: break-word;

为我工作。

word-wrap: break-word;

worked for me.

回复收藏 0 原文

°如果伤别离去 2024-07-26 17:21:46

line-break: anywhere;

或者

word-break: break-all;

也有可能。

line-break: anywhere;

word-break: break-all;

also possible.

回复收藏 0 原文

痞味浪人 2024-07-26 17:21:46

我发现你可以利用 CSS 的空白属性：

white-space: normal;

它会将单词打乱为普通文本。

I found that you can make use of the white-space CSS property:

white-space: normal;

And it will break the words as normal text.

回复收藏 0 原文

夏见 2024-07-26 17:21:46

white-space: normal;
word-wrap: break-word;

我的可以同时使用

white-space: normal;
word-wrap: break-word;

Mine works with both

回复收藏 0 原文

醉城メ夜风 2024-07-26 17:21:46

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

<INPUT value="Line 1
Line 2">

当然，确定在哪里放置换行符不一定是微不足道的...

如果您可以使用 HTML < ;BUTTON> 而不是，这样按钮标签就是元素的内容而不是其 value 属性，将该内容放置在 < code> 的 width 属性比按钮窄几个像素，似乎可以解决问题（即使在 IE6 中也是如此：-）。

You can force it (browser permitting, I imagine) by inserting line breaks in the HTML source, like this:

<INPUT value="Line 1
Line 2">

Of course working out where to place the line breaks is not necessarily trivial...

If you can use an HTML <BUTTON> instead of an <INPUT>, such that the button label is the element's content rather than its value attribute, placing that content inside a <SPAN> with a width attribute that is a few pixels narrower than that of the button seems to do the trick (even in IE6 :-).

回复收藏 0 原文

~没有更多了~