Block在新行上占用空白区域

Question

我有这个HTML

.h1 {
  text-transform: uppercase;
  max-width: 50%;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}
.scada {
  font-family: Scada, sans-serif;
}
.left {
  float: left;
}

<h1 class="h1 scada left">Laptop Lenovo IdeaPad 100 (80MJ003YUA)</h1>
<div class="code left">code: U0140224</div>

在大分辨率上它运作得很好。

但是当分辨率变小，并且这个h1标签中的文本（顺便说一下，我尝试用div标签交换它，没有区别）进入一个新行时，标签仍然占据了它的右侧空间。

肯定不是边距/填充/边框。我也试过改变最大宽度。到目前为止没有任何帮助。有什么想法吗？

更新 对不起，我没有正确地提出这个问题。我需要在一条新线上就像它一样，但不要占据它右边的空白。

Answer 1

这是因为浏览器试图不在中间吱吱嘎嘎地说话，所以你的 word-break: break-all; 实际上比文本大一些，但是这条线早早就被破坏了，不会破坏这个词。 添加：

if let context = delegate?.managedObjectContext {


        do {

      let fetchRequest = NSFetchRequest<Message>(entityName: "Message")

          let messages = try(context.fetch(fetchRequest) as? [Message])

给你的div看看差异。这是一个例子：JSfiddle

Answer 2

.h1 {
  text-transform: uppercase;
  max-width: 79%;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
  word-break: break-all;
}
.scada {
  font-family: Scada, sans-serif;
}
.left {
  float: left;
}

<h1 class="h1 scada left">Laptop Lenovo IdeaPad 100 (80MJ003YUA)</h1>
<div class="code left">code: U0140224</div>