HTML - 如何使正文中的文本在页面的某个 x 值处移动到下一行？

目暮deep-breaths lv.1

发布时间：2022-09-06 03:31:40 338

相关标签： # css

我想创建一个包含我的项目和简历的简单 html 页面。我想做一些整洁的事情，其中文本与页面右侧对齐，用于页面的某些元素，而左侧则用于其他元素。与其人为地安装

到在移动设备和台式机上格式不同的文本中，我怎样才能使文本在某个点简单地插入下一行，而不是屏幕边缘？这是我的代码：

<!DOCTYPE html>

<html lang="en">

<head>

<title>xxx</title>

<style>

nav {border-bottom: 3px solid rgb(255, 255, 255);}

body {padding: 5;margin: 20;background: #ffffff;}

.slick {font-family: OCR A Std, monospace}

.large_words {font-size: 120%;}

.sub {font-size: 80%; text-align: right; width: 80%;}

.grade_sub {font-size:70%;}

.rightside {text-align: right;}

.br {display: block;margin-bottom: 0em;}

berkeley_cols {animation: color-change 3s infinite;}

@keyframes color-change {0% {color: royalblue;} 50% { color: goldenrod;} 100% { color: royalblue;}}

econ_cols {animation: money 5s infinite;}

@keyframes money {0% {color: rgb(57, 199, 104);} 25% { color: rgb(6, 77, 30);}

50% { color: rgb(0, 0, 0);} 75% { color: rgb(12, 77, 30);} 100% { color: rgb(57, 199, 104);}}

data_science_cols {animation: datasci 3s infinite;}

@keyframes datasci {0% {color: orange;} 50% { color: rgb(206, 11, 11);} 100% { color: orange;}}

</style>

</head>

<body>

<div class="slick"><h1>Welcome to my portfolio!</h1>

<nav>

</nav>

<div class="large_words">

<p align='left'>Hi, my name is xxx.<span class="br"></span> </div> This site showcases my projects and experience/education.</p>

<span class="br"></span>

<p align="left">I graduated from

<a href="https://www.berkeley.edu/" target="_blank"><berkeley_cols><b>UC Berkeley</b></berkeley_cols></a>

with a B.A. in

<a href="https://www.econ.berkeley.edu/" target="_blank"><econ_cols><b>Economics</b></econ_cols></a>

and a minor in

<a href="https://data.berkeley.edu/academics/data-science-undergraduate-studies/data-science-minor" target="_blank"><data_science_cols><b>Data Science</b></data_science_cols></a> in Summer 2022.

</p>

<h2 align="right">Applications</h2>

<div class="rightside">

<a href="xxx" target="_blank">Savings Rate Calculator</a>

<div class="sub">

This calculates a series of projected years needed from an investment as a function of a myriad of variables,

<br> such as the interest rate, savings rate, annual income, a target $ amount and whether a recession has occured

<br>(just decreases the investor's savings rate by an arbitrary value).<br>

<a href="xxx">Here</a> is a 3 minute explanation of the application.

</div>

<div class="grade_sub">Grade: 10/10</div>

<a href="xxx" target="_blank">State of the Union Address Word Analysis</a>

<div class="sub">

This allows for bag-of-words text analysis of the previous 20 State of the Union Addresses.

<br>One can find the frequency of each word or phrase (up to four words), as well as plot the frequency

<br> of any word throughout time.<br>

<a href="xxx">Here</a> is a 4 minute explanation of the application.

</div>

<div class="grade_sub">Grade: 9.75/10</div>

<h2>Data Analysis</h2>

<a href="xxx", target="_blank">Cholangitis Study</a>

<div class="sub">

This report uses <b>R tidyverse and other libraries</b> to clean and explore a dataset coming from a randomized, <br>

double-blinded, placebo-controlled clinical trial ofthe immunosuppressive

<br> drug D-penicillamine at the Mayo Clinic. Major points of exploration are linear and logistic

<br>regression of the number of days a patient survives from the point of registration, and the status of a

<br> patient at the end of a study, respectively. This is supplemented by multivariate data visualization.

</div>

<div class="grade_sub">Grade: 78/80</div>

<a href="xxx", target="_blank">Finding the best fictional NBA player</a>

<div class="sub">

This report uses <b>base Python, pandas and visualization packages</b> to find the objective

<br>best player from a fictional NBA timeline I started when I was 12 through 19 years old

<br> with the help of my imagination and NBA2K's MyLeague mode. Using a dataset of 87 notable players' statistics,

<br> I take as many factors into acocunt to come up with a ranking of each player.

</div>

<footer>

<div class="slick"><p>Connect with me on <a href="xxx" target="_blank">LinkedIn</a>!</p></div>

</footer>

</body>

</html>

所以想象一下，我的文本在它变成一个新行之前就跑到了网页的边缘。如何停止在网页的 50% 标记处对齐的文本，然后让它进入下一行？

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。