Javascript 如何在不中断导航栏上的长值的情况下调整浏览器的大小？

我得到了一个导航条，有3个短值和一个长值

<div id="navegation" class="col-12 col-m-12">
    <ul class="none col-12-block col-m-12-block">
            <a href="#" class="col-3"><img class="logo" src="img/logo.png"/></a>
            <a href="#"><li class="navOption col-2">Navbar 1</li></a>
            <a href="#"><li class="navOption col-2 col-m-2">Navbar 2</li></a>
            <a href="#"><li class="navOption col-2">Navbar 3</li></a>
            <a href="#"><li class="navOption col-2">Navbar Long Name 1</li></a>
    </ul>

但似乎内容必须是空的才能被重写

现在我在考虑使用标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

使用jquery或js以某种方式捕获屏幕宽度，并使用

.innerHtml

或

.val（）

设置条件。但也许我想得太多了，有一种css方式可以通过

overflow:auto尊重内容或类似的东西

也许你能帮我
提前感谢
您可以使用帮助器类添加一些媒体查询，以允许您切换内容

下面仅使用.desktop和.mobile

看


@仅媒体屏幕和（最小宽度：992px）{
.仅限桌面{
显示：块！重要；
}
.仅限手机{
显示：无！重要；
}
}
@仅介质屏幕和（最大宽度：991px）{
.仅限手机{
显示：块！重要；
}
.仅限桌面{
显示：无！重要；
}
}








您可以使用引导来执行此操作：



JS-Bin


使用空格代替空格
如。
Navbar Long Name 1
您在col类中使用的css框架是什么？在head@Manish中插入它会有什么不同？您好，谢谢您的回答，但问题仍然存在，正如您在snipplet中看到的，当您调整到最短宽度时，“NavbarLongName1”断开了行，在我的例子中，名称特别长，因此，我需要编辑的内容，以放置一个节录。抱歉，我的英语不好。是否阻止浏览器断开它？是的，如果显示为内联块，则会断开它
<meta name="viewport" content="width=device-width, initial-scale=1.0">