html - 强制 div 中的文本仅在到达 div 的末尾时中断

标签 html css

在下面的代码片段中有 2 个示例来演示我要完成的任务:

我希望我的顶级示例的行为类似于下面的示例,这意味着它将与给定的文本保持在 2 行中,问题是当我使用 space 时它会断行并且我希望文本继续到 div 的末尾,然后才中断。

有什么CSS建议吗?

  .myClass{
      font-size: 10px;
      color: #9a9a9a;
      width: 160px;
      overflow: hidden;
      -ms-word-wrap: break-word;
      word-wrap: break-word;  
    }
  <body>
    <div class="myClass">
      WWWWWWWW WWWWWWWWWWWWWWWWWWWWWWWWW
    </div>
    
    <hr>
    <div class="myClass">
      WWWWWWWW WWWWWWWWW WWWWWWWWWWWWWWWW
    </div>
  </body>

最佳答案

您可以为此使用以下 CSS

.myClass{
  font-size: 10px;
  color: #9a9a9a;
  width: 160px;
  overflow: hidden;
  word-break: break-all;
  word-wrap: break-word;
  display: block;
}

关于html - 强制 div 中的文本仅在到达 div 的末尾时中断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42693920/

相关文章:

包含来自 Head 标记的脚本和资源的 PHP 文件(包含 PHP 的问题)

javascript - 如何使 CSS 背景的一部分完全适合浏览器

javascript - 您最喜欢的 Java Script 所见即所得编辑器组件是什么?

jquery - iPad 设备上的溢出 x 和 y 未显示

css - 使用 CSS 调整 PlaceBarActions 在 xPages Ext Lib 应用程序布局控件中的位置

css - 为什么无法在 Firefox 浏览器中查看输入文本?

javascript - 确定在 html5 canvas javascript 中点击了屏幕上的哪个对象?

javascript - 链接同名类,这样当一个被点击时,另一个被赋予一个类

html - 单击悬停错误(chrome)

html - 使用 bootstrap 3 在同一行上获取两个日期时间选择器?