css - 在导航栏中包装超链接文本

标签 css twitter-bootstrap

<分区>

在此先感谢您的帮助!我查看了几篇文章,但无法找到解决我的问题或真正解决我面临的问题的解决方案。我正在使用 bootstrap 3.3.5 构建一个固定的导航栏。一些超链接文本很长。我想换行超链接文本。我也需要使用下拉菜单。我一直在尝试换行,但没有成功。

我尝试在 <p> 中创建我的链接像这样:

<li><div><p class="navber-text"><a href="#temp_url">a very long and wordy link goes here</a></p></div></li>

我也试过添加:

@media (min-width: 768px) {
  .navbar-text {
    float: left;
    margin-right: 15px;
    margin-left: 15px;
    white-space:normal !important;
    max-width:200px;
    word-wrap: normal;
  }

到我的 custom.css 文件,我似乎无法让它工作。

有人介意告诉我我在哪里犯了错误吗? 按钮组对我来说是更好的选择吗?

如前所述,我确实需要使用下拉菜单,如果我确实使用了按钮组,我希望它始终保持在屏幕顶部可见。

感谢您提供的任何帮助。

最佳答案

在 CSS 中使用 word-break: break-all; 来打断单词

关于css - 在导航栏中包装超链接文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31178209/

上一篇:javascript - 页面滚动到 div 的底部

下一篇:javascript - CSS 样式不适用于 jquery

相关文章:

html - 响应式和全高侧边栏

html - HTML/CSS 中的自定义形状文本区域

html - CSS 特定表

Jquery 背景图像在 Safari 中不起作用

css - 我怎样才能让 Bootstrap 列内的 div 可滚动

javascript - 使用 vue.js 更改 v-tab 中变量的标题

html - 将 div 代码添加到 CSS 时导航栏被破坏

javascript - 如何在我们的 javascript 中触发 Bootstrap

html - flexbox 和屏幕尺寸的问题

html - 响应式断点断点不正确