Question

我的标题文字如下：

My Hea....

我希望它阅读

My HeaderHereTodayAndIsTooLong

我需要在jquery mobile framework / css中更改什么才能正确渲染？

   <div data-role="header"  data-position="fixed" data-tap-toggle="false">
     <h2>My HeaderHereTodayAndIsTooLong</h2>
      <a href="@Url.Action("Index","Home", new { partnumber = ViewBag.PartNumber })" class="ui-btn-right" data-icon="info">Home</a>
     </div>

Answer 1

将h2标签包裹在div中，如果您希望文本显示在中心，则将文本对齐样式添加到刚制作的容器div中：

<div data-role="header" data-position="fixed" data-tap-toggle="false">
    <div style="text-align:center;">
        <h2>My HeaderHereTodayAndIsTooLong</h2>
    </div>
</div>

编辑：要让您的按钮显示在右侧，请删除文本对齐，然后将一些样式应用到标题中以便按需要定位，粗略示例：

<div data-role="header"  data-position="fixed" data-tap-toggle="false">
    <div>
        <h2 style="font-size:0.8em;margin-left:10px;width:70%;">My Header Here Today And Is Too Long</h2>
    </div>
    <a href="@Url.Action("Index","Home", new { partnumber = ViewBag.PartNumber })" class="ui-btn-right" data-icon="info">Home</a>
</div>

Answer 2

您可以尝试覆盖JQM添加到hx的边距样式，当然这只会给您带来更多空间，最终如果您的标题文本很长，它仍会溢出（您可以当然会覆盖那些样式）。例如

.lrMarg0
    {
        margin-left:0px !important;
        margin-right:0px !important;
    }


     <div data-role="header" data-position="fixed" data-tap-toggle="false">
        <h2 class="lrMarg0">My HeaderHereTodayAndIsTooLong</h2>
        <a href="#"  class="ui-btn-right" data-icon="gear" data-role="button">Next</a>
      </div>

标题文本没有包装JQM

2 个答案: