当里面有文字时，如何防止HTML元素放大？
[英]How do I prevent a HTML element from enlarging when there is text inside?
问题描述
I have two columns, the first must have 200px, but no more than 50% of the window, and the second column must take the remainder. 
我有两列，第一列必须具有200px，但不超过窗口的50％，第二列必须包含其余部分。
Basically, I want it to behave like the first row: https://jsfiddle.net/vao88dd4/10/ 基本上，我希望它的行为像第一行： https : //jsfiddle.net/vao88dd4/10/
.box { display: flex; background-color: orange; flex-direction: row; width: 100%; height: 150px; } .left { background-color: yellow; width: 200px; max-width: 50% } .right { background-color: green; flex-grow: 1; overflow-wrap: break-word; word-break: break-word; }
<span class="box"> <span class="left">LEFT</span> <span class="right">RIGHT</span> </span> <span class="box"> <span class="left">LEFT</span> <span class="right">RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT</span> </span>
The problem is, when there's text in the second column, it will enlarge it, causing the first one to shrink. 问题是，当第二列中有文本时，它将放大它，导致第一列缩小。
How do I make to get the pretended behaviour? 我如何获得假装的行为？
2 个解决方案
解决方案1
0 2017-09-23 19:08:55
<style>
.box {
display: flex;
background-color: orange;
flex-direction: row;
width: 100%;
height: 150px;
}
.left {
background-color: yellow;
min-width: 200px;
flex: 0;
overflow-wrap: break-word;
word-wrap: break-word;
}
.right {
background-color: green;
flex: 1;
overflow-wrap: break-word;
word-break: break-word;
}
@media screen and (max-width: 500px) {
.box {
flex-direction: column;
}
.left {
width: 100%;
background-color: lightgreen;
}
.right {
width: 100%;
background-color: teal;
}
}
</style>
- I added min-width: 200px; 我添加了最小宽度：200px； on the left span 在左跨
- I added matching word wrapping on both left+right 我在左侧和右侧都添加了匹配的自动换行
- I added flex: 0 on the left span which keeps its specified size 我在左跨度上添加了flex：0，以保持其指定的大小
- I added flex: 1 on the right span which causes it to fill any remaining space 我在正确的跨度上添加了flex：1，使其填充了所有剩余空间
- I removed flex-grow on the right span because of this 因此，我在正确的跨度上删除了flex-grow
- I added a media query which says when the viewport width goes below 500px, change the box to flex-direction: column; 我添加了一个媒体查询，该查询说当视口宽度小于500px时，将框更改为flex-direction：column; and make the spans 100% width 并使其跨度为100％宽度
- This is minimal changes to get what you are asking for, I think. 我认为，这是最小的更改，可以满足您的要求。
HTML (I just added some text, no element changes) HTML（我刚刚添加了一些文本，没有任何元素更改）
<span class="box">
<span class="left">
LEFT aosdfnhaskldfn askldnf aklsjdfnk sdg adfh adf
</span>
<span class="right">
RIGHT sfh sfgh srt tj sfgtj sfj fgj
</span>
</span>
<span class="box">
<span class="left">
LEFT sdh sdh sth rth sh
</span>
<span class="right">
RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT RIGHT
</span>
</span>
Media queries are super amazing because you get full control over when things change and how, so you can do things you couldn't otherwise. 媒体查询超级棒，因为您可以完全控制何时发生变化以及如何进行更改，因此您可以做其他事情无法做的事情。 It is very common to have media query breakpoints, so it updates the appearance above/below say 700px, 1024px, 1400px. 拥有媒体查询断点是很常见的，因此它会更新外观，例如700px，1024px，1400px。 It takes more work, but you will find it is worth it because your page/site looks great on every device. 这需要更多的工作，但是您会发现值得这样做，因为您的页面/站点在每台设备上看起来都很棒。
As I mentioned in my comment below, make sure you use this in your <head> : 正如我在下面的评论中提到的那样，请确保在<head>使用它：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
解决方案2
0 2017-09-23 19:18:09
如果您仅针对现代浏览器，则可能要使用table元素或使用display: grid 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.