控制响应式模板上的文本宽度限制

Posted 2023-03-06

【中文标题】控制响应式模板上的文本宽度限制

【英文标题】：Control restriction of text width on responsive template

【发布时间】：2016-03-02 00:07:13

【问题描述】：

我已经在我的网站上使用响应式元标记，该标记大部分都有效：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

显示消息时，我的“消息”页面似乎出现问题。小消息似乎没有问题，而在计算机上，大消息也显示得很好。尽管在我的手机上，大消息会出现在屏幕右侧太远，因此您必须向右滚动页面才能阅读消息。

这是我的脚本：

<div class="media">
  <div class="media-left">
    <a href="#">
      <img src="assets/img/defaultuser.png"    hspace="10px" class="media-object" align="left">
    </a>
  </div>
  <div class="media-body">
    <div style="display:inline"><b><a href=""><? echo ''.$me_first_name.' '.$me_last_name.''; ?></a></b></div> <div align="right" style="float:right; display:inline"> <? echo $me_time; ?> </div><br>
    <? echo $me_message; ?>
  </div>
</div>

我试过弄乱宽度属性但没有运气：

style="width:300px"

并尝试使用响应式引导属性：

<div class="col-xs-12 col-md-8">

但这仍然没有将文本保留在手机浏览器上的设置块中。有没有办法只限制手机浏览器上的文字宽度而不影响PC浏览器上的文字宽度？

【参考方案1】：

您是否尝试过使用自动功能 -

<style>
div 
    width: auto;
    height: 25px;
    position: relative;
    float: left;

</style>

只需将此添加到您的 CSS 代码中，它就会根据显示器或设备的大小自动设置宽度。

【讨论】：

我已将float: right; 更改为float: left，它似乎工作正常。为了确定，我会再测试几次！感谢您的帮助！

抱歉，我的错误 - 我将编辑答案，因为我不确定您的目标是哪个方向。