问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

为移动/响应式设计指定换行点

社区维基
1
新手上路，请多包涵

我需要在移动/小视图中的特定点换行。例如，我希望文本 « Commune : CENON-SUR-VIENNE » 在冒号字符后中断。是否有允许手动指定而不是让 Bootstrap CSS 自动执行的语法？

我在下面包含了一段我的 HTML 代码。我已经很好地指定了 <head> 内的元标记：

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

截屏 ：

在此处输入图像描述

HTML 代码：

 <div class="container">
  <div class="tab-content">
    <div class="col-lg-5">
      <div>
        <h4>Commune : CENON-SUR-VIENNE</h4>
      </div>
    </div>
  </div>
</div>

原文由 wiltomap 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssbootstraptwitter-bootstrap-3line-breaks
阅读 521
2 个回答
得票最新
社区维基
1
✓ 已被采纳

你可以试试这个。 https://jsfiddle.net/5vwh46f8/1/

将第二个单词放在一个跨度中并添加一个样式内联块。

 <div class="container">
<div class="tab-content">
<div class="col-lg-5">
  <div>
  <h4>Commune : <span>CENON-SUR-VIENNE</span></h4>
  </div>
</div>
</div>
</div>

<style>
h4 span{
display: inline-block;
}
</style>

原文由 Nique Joe 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

更直接的选择是使用 Bootstrap 内置的显示类并根据屏幕大小隐藏 <br /> 。

 <h4>Commune : <br class="d-md-none" />CENON-SUR-VIENNE</h4>

在 span 中使用列或包装内容是多余的；只需添加一个小显示类并根据需要显示/隐藏。

原文由 Metro Smurf 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题