我在(比如)对话框的左半部分有一个 div，在右半部分有一个图像。 div 和图像在垂直方向上从同一点开始，但文本比图像长得多。我想让文本位于图像的左侧，一旦图像结束(垂直)，我希望文本占据整个宽度。只要文本有空格，一切似乎都按预期工作。
在 Safari 上，一旦我点击编辑文本，如果文本没有空格，文本就会跳到图像下方，而不是留在图像左侧。在 Chrome 上，无论文本是否有空格，一切都按预期工作。
在 Safari 上编辑时，是否有任何解决方法可以让文本位于图像的左侧？
简单的 JSFiddle https://jsfiddle.net/adeopura/jpu0yckL/ .在 Chrome(版本 62.0.3202.94)上可以看到预期的行为，在 Safari(版本 11.0.1)上可以看到意外的行为。 MAC 操作系统版本为 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;
}
最佳答案
white-space: pre 在 Safari 上按预期工作，但在 Chrome 上却没有。您可以为 Safari 和 Chrome 声明两个单独的类，并使用 Javascript 相应地调整它们。
检查更新的 fiddle 。 DEMO
我正在使用此代码段来检查浏览器是否为 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>
关于html - Safari : Text in contenteditable div with no spaces does not wrap around image upon focus，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47405036/
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315
考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://
我正在使用Maruku，将Markdown(超集)转换为HTML，你知道我该怎么做才能从HTML转换为Markdown吗？ 最佳答案 Google发现了一个名为reverse_markdown的ruby脚本.它似乎可以满足您的需求。 关于ruby-on-rails-我需要从HTML转到markdown，有什么建议吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/175162
我正在尝试使用nokogirigem提取页面上的所有url及其链接文本，并将链接文本和url存储在散列中。FooBar我想回去{"Foo"=>"#foo","Bar"=>"#bar"} 最佳答案 这是一个单行:Hash[doc.xpath('//a[@href]').map{|link|[link.text.strip,link["href"]]}]#=>{"Foo"=>"#foo","Bar"=>"#bar"}拆分一点可以说更具可读性:h={}doc.xpath('//a[@href]').eachdo|link|h[link.t