Question

是否有任何CSS技巧可以在按钮控件中显示多行文本段落。我不想要“pre”标签或Javascript解决方案，因为我会有大量的按钮小部件！以下代码是为了您的方便：

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
</head>
<body>

<div data-role="page" id="pageone">
  <div data-role="header">
    <h1>Single Line Buttons</h1>
  </div>

  <div data-role="main" class="ui-content">
    <a href="#" class="ui-btn">This should be a multiline Button containing sevaral lines of text like a paragraph</a>
  </div>

  <div data-role="footer">
    <h1>Footer Text</h1>
  </div>
</div> 


</body>
</html>

Answer 1

如果文本中包含您想要的换行符，则可以使用white-space css属性。

.ui-btn { white-space: pre; }

但是，您的选择器可能必须更具体，以覆盖默认的jquery-mobile样式。

例如：

.ui-content .ui-btn { white-space: pre; }

http://jsfiddle.net/e00889yz/

更新

这里的问题是jquery mobile的样式表定义了“ui-btn”类的白色空间。所以你必须使用更具体的css选择器覆盖该属性，或者使用带有white-space pre的“！important”标志（如果你的文本已经有换行符）或者ezanker注意到，white-space normal（如果它没有）预定义的换行符）

http://jsfiddle.net/e00889yz/1/

Answer 2

对于您的示例代码，只需添加CSS：

.ui-btn {
    white-space: normal;
    text-align: left;
}

正常的空格允许文本换行，而text-align则给出标准的左对齐段落。如果要保持中心对齐，只需从CSS中删除text-align。

这是 DEMO

如何使用jQuery Mobile在按钮中显示多行段落文本？

2 个答案: