html - 占 2 行的短文本
问题描述
我发现在移动设备上,我知道只能出现在 1 行中的短文本占用了 2 行。
我发现“white-space: nowrap”会确保它出现在 1 行中。但是,现在我有一个问题,应该占用 2 行的长文本现在被迫出现在 1 行中,这是一个问题。
是什么导致了这个问题,我该如何解决?
这是第三个 Lorem Ipsum
<div class="name">Lorem Ipsum </div>
这导致了这个问题
我想要的是应该占用 1 行(或 2 行)的文本仅占用 1 行(或 2 行)。
.grid article {
position: relative;
}
.students {
position: absolute;
}
.person {
display: flex;
align-items: center;
margin,
padding: 0px;
}
.name {
letter-spacing: 2.2px;
flex: 1;
margin-left: 20px;
}
.picture {
flex: 0 0 28px;
margin: 0;
}
.person img {
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
@media (min-width: 1312px) {
.students {
top: 565px;
}
.name {
font-size: 15px;
letter-spacing: 2.2px;
margin-left: 20px;
}
.person img {
width: 28px;
}
.person {
margin-bottom: -1px;
}
}
@media (max-width: 599px) {
.students {
top: 375px;
}
.name {
font-size: 11px;
letter-spacing: 2.2px;
margin-left: 6px;
}
.person img {
width: 21px;
}
.person {
margin-bottom: 5px;
}
}
<article>
<a href="#">
<div class="photo" style="background-image: url(img/image.png);"></div>
</a>
<div class="text">
<div class="one">Lorem Ipsum</div>
<div class="two">Lorem Ipsum</div>
</div>
<div class="students">
<div class="person">
<div class="picture"><img src="img/sample.jpg"></div>
<div class="name">Lorem Ipsum </div>
</div>
</div>
</article>
网格布局 CSS
.grid {
display: -ms-flexbox;
-ms-flex-wrap: wrap;
display: grid;
justify-content: start;
margin-top: -20px;
justify-content: space-between;
}
.grid article {
-ms-flex: 0 0 250px;
}
.grid .photo {
width: 100%;
background-size: contain;
background-position: center;
}
.grid .photo:after {
content: "";
display: block;
padding-bottom: 100%;
}
.grid a {
display: block;
text-decoration: none;
color: inherit;
}
.grid a:hover {
opacity: 0.8;
}
.grid .text {
margin: 0px;
}
@media (max-width: 599px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
grid-row-gap: 140px;
grid-column-gap: 20px;
margin-top: 18px;
}
}
解决方案
您是否需要将图像放在移动设备上的文字旁边?
如果您希望它们保持对齐,那么只需flex-direction: row;
在您的 person 类中添加并在您的和div 上设置一个不超过 599px@media (max-width: 599px)
的最大宽度。picture
name
如果您希望它们堆叠,则只需添加flex-direction: column;
到您的 person 类中@media (max-width: 599px)
注意:您可能需要根据图像旁边的文本数量调整宽度,以便在移动设备上达到宽度阈值时不会换行。
请参阅下面的片段。
.grid article {
position: relative;
}
.students {
position: absolute;
}
.person {
display: flex;
align-items: center;
margin,
padding: 0px;
}
.name {
letter-spacing: 2.2px;
flex: 1;
margin-left: 20px;
}
.picture {
flex: 0 0 28px;
margin: 0;
}
.person img {
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
@media (min-width: 1312px) {
.students {
top: 565px;
}
.name {
font-size: 15px;
letter-spacing: 2.2px;
margin-left: 20px;
}
.person img {
width: 28px;
}
.person {
margin-bottom: -1px;
}
}
@media (max-width: 599px) {
.students {
top: 375px;
}
.name {
font-size: 11px;
letter-spacing: 2.2px;
margin-left: 6px;
display: block;
width: 100%;
}
.picture {
width: 21px;
max-width: 21px;
}
.person {
flex-direction: row;
max-width: 200px;
}
}
<article>
<a href="#">
<div class="photo" style="background-image: url(img/image.png);"></div>
</a>
<div class="text">
<div class="one">Lorem Ipsum</div>
<div class="two">Lorem Ipsum</div>
</div>
<div class="students">
<div class="person">
<div class="picture"><img src="https://cdn.pixabay.com/photo/2020/10/28/11/08/castle-5693094__340.jpg"></div>
<div class="name">Lorem Ipsum </div>
</div>
</div>
</article>
推荐阅读
- php - 使用 preg_replace 突出显示重音搜索词
- sharepoint - 如何让我的按钮在我的文本输入框中触发我的 onchange 事件?
- java - 如何将日期(即 1995 年 4 月 7 日)分解为:4 + 7+ 1+9+9+5 并在 java 中找到总和?
- laravel - 在laravel广播时获得403 Forbidden
- java - 是否可以检索 RDF4J 事务的更新语句?
- python - 在 tensorflow 计算机视觉建模中在哪里定义批量大小?
- ios - SwiftUI 中的自定义 URL 方案
- tomcat - 以最少的停机时间更新 Tomcat webapp
- node.js - 开玩笑测试无法匹配部分对象
- telerik - 当控制器 [Telerik] 的方法出现异常时,如何取消从剑道网格中删除的项目?[解决了]