Question

我左边有一个div（比方说）一个对话框，右边有一个图像。 div和图像从垂直方向开始，但文本比图像长得多。我想将文本放在图像的左侧，一旦图像结束（垂直），我希望文本占据整个宽度。只要文本有空格，一切似乎都按预期工作。

在Safari上，一旦我单击编辑文本，如果文本没有空格，文本将跳到图像下方，而不是保留在图像的左侧。无论文本是否有空格，Chrome上的内容都可以正常工作。

在Safari上进行编辑时，是否有任何解决方法可以将文本放在图像的左侧？

Simple JSFiddle https://jsfiddle.net/adeopura/jpu0yckL/。可以在Chrome（版本62.0.3202.94）上看到预期的行为，并且可以在Safari（版本11.0.1）上看到意外行为。 MAC OS版本为10.13.1。如果我不需要修改HTML结构并且只有CSS解决方案，我更愿意，但我愿意接受这些想法。

HTML是：

<div class="image-desc-container">
<div class="image-container">
   <img width="120" class="image" src="http://www.ordnung-statt-chaos.de/wp-content/themes/thesis/rotator/sample-4.jpg" />
</div>

<div class="textarea-container">
  <div contenteditable="true" class="my-input">Loremipsumdolorsitametconsetetursadipscingelitrseddiam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet</div>
</div>

CSS是：

.image-desc-container{
  width: 250px; 
  min-height: 150px; 
  position: relative; 
  border: 1px solid #ccc; 
  background: #f7f7f7; 
  padding: 10px; 
  word-wrap: break-word; 
  display: block;
}

.image-container{
  float: right;
  margin-left: 16px;
  position: relative;
  z-index: 1;
}

.image {
  width: 120px;
  height: 120px;
}

.textarea-container {
  position: relative;
  display: block;
}

.my-input {
  min-height: auto;
  word-break: break-all;
  display: block;
  user-select: text;
  -webkit-user-select: text;
  overflow: initial;
  white-space: pre-line;
  -webkit-nbsp-mode: normal;
  line-break: auto;
}

Answer 1

我在#box class

中更新了你的css add wrap-word属性

#box { width: 250px; min-height: 150px; position: relative; border: 1px solid #ccc; background: #f7f7f7; padding: 10px;word-wrap:break-word }

#box img { float: right; }

Safari：没有空格的contenteditable div中的文本不会在焦点处环绕图像

1 个答案: