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

Question

我已经在我的网站上使用了响应式元标记，它在大多数情况下都有效:

<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" alt="user" width="64px" height="64px" 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>

我试过弄乱 width 属性但没有成功:

style="width:300px"

并尝试使用响应式 Bootstrap 属性:

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

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

Answer 1

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

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

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