为什么我的标题文本被截断？ [英] Why is my header text being truncated?

问题描述

我有一个使用带有标题标记的jQuery mobile构建的页面，如下所示：

I have a page built with jQuery mobile with header markup that looks like this:

<div data-role="header">
    <h1>The Magnet Puzzle</h1>
</div>

我在Android和Windows手机上测试了它，并在两者中截断了最后三个字符标题文本，即使标题足够宽以适合整个标题：

I tested it out in an Android and a Windows phone, and in both it truncates the last three characters of the header text, even though the header is wide enough to fit the entire title:

我希望它看起来像这样：

I want it to look like this instead:

为什么会被截断，以及如何修复它以便显示整个标题？

Why is it being truncated, and how can I fix it so that it displays the entire title?

推荐答案

我认为真正的问题是JqMobile正在设置左右边距为30％，只留下标题总宽度的40％。将其更改为10％，并在真正需要时获得省略号。

I think the real trouble is that JqMobile is setting the left and right margin to 30% leaving only 40% of the total width for your title. Change that to 10% and you get the ellipsis when you really need it.

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}

这篇关于为什么我的标题文本被截断？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！