logo标签列表

Safari：没有空格的contenteditable div中的文本在聚焦时不会围绕图像换行

htmlcsscontenteditable
6
我有一个div在对话框的左侧，右侧有一张图片。这个div和图片在垂直方向上起始点相同，但是文本比图片长得多。我希望文本在图片的左侧，一旦图片结束（垂直方向上），文本就占据整个宽度。只要文本有空格，一切都按预期工作。

在Safari上，一旦我点击编辑文本并且文本没有空格，文本会跳到图片下面而不是保持在图片左边。无论文本是否有空格，在Chrome上都能正常工作。

有什么解决办法可以让在Safari上编辑时文本在图片左侧吗？

这是一个简单的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;
}
已更新jsfiddle以更好地展示问题。 - AshD
2个回答
2

我已经更新了你的CSS，在#box类中添加了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; }
谢谢。超出容器的文本是我在代码中处理过但忘记放到fiddle中了。关于Safari不能让文本环绕图片的问题是我所关注的，而你提供的CSS并没有解决这个问题。 - AshD
我已经在Safari 5.1.7版本中进行了测试，文本可以自动换行，并且对我来说运行良好。 你具体想要什么？ - BASEER HAIDER JAFRI
我正在使用MAC上的Safari 11.0.1版本。如果您在Chrome上打开fiddle，则文本将从图像左侧开始。在Safari上，文本从图像下方开始。我正在尝试使Safari上的行为与Chrome上的行为相同。 - AshD
Baseer Haider - 如果你有机会，请告诉我这在 Safari 11.0.1 版本上是否有效。 - AshD
2

white-space: pre 在Safari上的效果与预期相符，但在Chrome上却不是。您可以为Safari和Chrome分别声明两个不同的类，并使用Javascript进行相应的调整。

请查看更新后的示例：演示

我使用以下代码段来检查浏览器是否为 Safari。

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

document.getElementById("input").style.whiteSpace = isSafari ? "pre" : "pre-line";
.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;
  -webkit-nbsp-mode: normal;
  line-break: auto;
}
<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" id="input" 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>
    
</div>

谢谢。看起来工作正常，请让我做更多的测试，然后我会很快标记答案并奖励。 - AshD
太好了！我更新了答案，加入了一些JS代码来检测浏览器是否为safari。请查看。 - Nandu Kalidindi
我正在使用https://browserstrangeness.bitbucket.io/css_hacks.html#webkit来确定Safari浏览器。我也可以使用您提出的方法。 - AshD
它说我只能在16小时后颁发这个赏金，所以我明天会这样做。 - AshD
太酷了！我也会去看看那些技巧。谢谢你。 - Nandu Kalidindi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接