当满足一定宽度时，如何断开文本列属性

Question

我试图使用text列属性，因为它看起来很方便，但我遇到的问题是，在一定的宽度下，我希望文本列"；中断"；而当屏幕尺寸在较小的宽度(在本例中为50px(时不在那里。我试图将列计数设置为0，以满足屏幕的最小宽度，认为这会将我的列转换为常规段落文本格式，但当我尝试在媒体查询中这样做时，它似乎不起作用，但在它之外起作用？我还尝试添加默认文本，认为它可以解决任何奇怪的问题，但没有任何变化。

我已经包含了我的HTML，CSS和CodePen链接。提前谢谢。

CodePen链接：https://codepen.io/alexbicycle/details/ExyzdEG

HTML:

<section class="section-intro"  id="skills-part-of-page">
<h2 class="section-intro-title">SKILLS</h2>
<div class="section-text-columns-container">
<p class="text-columns">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</section>

CSS：

.section-text-columns-container{
width: 50%;
margin-left: 21vw;
position: relative;
bottom: 15vh;
}

.text-columns{
/*To split text & have side by side*/
column-count: 2;
-webkit-column-count: 2;
column-gap: 5vh;
-webkit-column-gap: 4vh;
text-align: left;
}
@media screen and (min-width: 50px){
.section-text-columns-container{
width: 50%;
margin-left: 10vw;
background-color: grey;
}

.text-columns{
column-count: 0;
-webkit-column-count: 0;
display: inline-block; 
padding: 1%;
word-break: initial;
}
}

Answer 1

尝试column-count: initial;而不是column-count: 0;