问根据HTML、CSS中的页面宽度对齐段落
EN

Stack Overflow用户

提问于 2020-07-10 01:30:30

回答 1查看 44关注 0票数 1

我有一个标签，我已经为标签添加了一些段落。所以我试着在我的脚本中做同样的事情，但是这里发生的是段落没有正确对齐。我希望段落对齐到页面的3/4。这样我就可以节省下面的空间了。

<html>

<head>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--Stylesheets-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
  <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

  <!--JS-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <h2 class="grey_text text-center">Details</h2>
  <div class="container col-md-offset-1">
    <div class="container col-md-offset-1">
      <div id="form">
        <form>
          <fieldset>
            <div class="col-md-4 form-display">
              <label class="col-md-8" for="comments:">Added comments:</label>
              <div>
                <p>Respected Sir/Madam, My name is nnnnn. I have completed my Bachelor's degree from this college in the field of Engineering. I love problem-solving and reducing the complexity of issues, this pushed me towards Software technology. I have interned as a test engineer at a firm called vvvvvvvv and learned fundamental about testing. I always want to learn about new technologies and want to apply them in real life, which is why I feel I am suitable for this internship. The project's link which I have worked the respective Github repository link/Google drive link can be found in my resume. I am attaching my resume, certificate, and Linkedin profile for your reference. Looking forward to hearing from you soon. Thanks and regards, nnnnnnn LinkedIn profile: https://www.linkedin.com/in/nnnnnn/</p>
              </div>
            </div>

          </fieldset>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

如果我从脚本中删除Bootstrap和jQuery库，段落看起来不错。但是我需要那些Bootstrap和ajax库，因为我正在使用jQuery，Bootstrap风格在其余的程序和其他领域。我试过了

text-align: justify;text-justify: inter-word;

将其包含在<p>标记中。通过包含自动换行，它也不起作用。

我这里需要的是段落应该显示的宽度，以便它看起来很好。

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-07-10 01:53:49

下面是我认为你正在尝试实现的目标，即在页面的1/4上显示段落。如果这不是你想要做的，你可以在下面发表评论，我很乐意编辑来帮助你。

<!DOCTYPE html>
<html>

<head>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!--Stylesheets-->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
  <link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet">

  <!--JS-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>

<body>
  <h2 class="grey_text text-center">Details</h2>
  <div class="container-fluid">
    <div class="row">
      <div id="form">
        <form>
          <fieldset>
              <label class="col-md-8" for="comments:">Added comments:</label>
              <div class="col-8" >
                <p>
                  Respected Sir/Madam, My name is nnnnn. I have completed my Bachelor's degree from this college in the field of Engineering. I love problem-solving and reducing the complexity of issues, this pushed me towards Software technology. I have
                  interned as a test engineer at a firm called vvvvvvvv and learned fundamental about testing. I always want to learn about new technologies and want to apply them in real life, which is why I feel I am suitable for this internship. The
                  project's link which I have worked the respective Github repository link/Google drive link can be found in my resume. I am attaching my resume, certificate, and Linkedin profile for your reference. Looking forward to hearing from you
                  soon. Thanks and regards, nnnnnnn LinkedIn profile: https://www.linkedin.com/in/nnnnnn/</p>
              </div>

          </fieldset>
        </form>
      </div>
    </div>
  </div>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62820473

复制

相似问题

问根据HTML、CSS中的页面宽度对齐段落
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据HTML、CSS中的页面宽度对齐段落EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问根据HTML、CSS中的页面宽度对齐段落
EN