jquery移动按钮文本自动换行 [英] jquery mobile button text auto line break

问题描述

我想让按钮中的文字在到达按钮结尾时自动换行。当我们正常的jquery移动风格，它截断我的文本，并放置三个点像这样：
这里

我发现有点工作，这些点不显示像这样（白色空间：正常不适用于我）
< a href =http://jsfiddle.net/t6Qpe/2/ =nofollow>此处

有一个想法如何

解决方案

您不能在< CSS3但在CSS3中有一个新的CSS关键字叫word-break，允许你。这将显然只适用于CSS3浏览器。

给你的按钮一个css类，如果你想这只适用于单个按钮，如：

 < a data-role =buttonclass ='myButton'> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa< / a> 
  

然后创建如下的css样式：

  .myButton 
 {
 word-wrap：break-word！important; 
 white-space：normal！important; 
} 
  

然后将这个词包裹到按钮的指定宽度。 / p>

这里有一个更新的 jsFiddle示例来演示。

I want that the text in my button makes an automatic line break when it reaches the end of the button. When i us the normal jquery mobile style it truncates my text and places three dots like here: here

i found a little workarround that these dots don't show up like here (white-space:normal didn't work for me) here

has somone an idea how i can make it do auto line breaks ?

解决方案

You can't line break a single word in < CSS3 but there's a new css keyword in CSS3 called word-break that allows you to. This will obviously only work in CSS3 browsers.

Give your button a css class, if you want this to only apply to a single button, such as:

<a data-role="button" class='myButton'>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</a>

Then create a css style like this:

.myButton
{
   word-wrap: break-word !important;
   white-space: normal !important;
}

This will then wrap the word around into the specified width of the button.

Here's an updated jsFiddle example to demonstrate.

这篇关于jquery移动按钮文本自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！