草庐IT

2022-12-23 工作记录--CSS-超出多行显示省略号ios真机偶失效问题

小呀小萝卜儿 2023-04-09 原文

CSS-超出多行显示省略号ios真机偶失效问题

一、前言

最近帮同事解决一个了bug：在ios真机上，超出多行显示省略号的文本内容，偶然会出现未显示问题。

最开始，我没往 超出多行显示省略号 样式方面进攻，还以为是react渲染机制或者网络机制问题，但我发现后端数据一直console了滴，只是页面偶然未渲染，这让我纳闷了，经过多方尝试，终于找到了突破口：文本偶然未显示的关键点 竟然是 加了 超出多行显示省略号的样式，把这个样式注释掉 就不存在上述问题了。

But

我们应运营要求，需要保留这个样式，那该如何优化处理呢？请往下看吧👇🏻

二、问题分析与解决

我是在res.less里把 超出多行省略号处理 封装成一个通用样式滴，代码如下：

res.less

/** 多行显示省略号【默认超出两行省略号】 */
.overflow-hidden(@clamp:2) {
  -webkit-box-orient: vertical; // 避免压缩后删除此行
  -webkit-line-clamp: @clamp; // 显示省略号行数
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
}

现在让我们来看看引用时的写法区别吧~

1、错误写法 ❌

html

/* text: 后端返的文本内容 */
<div className="text">{text}</div>

css

@import "../../res.less";
.text {
    width: 367px;
    left: 193px;
    top: 559px;
    position: absolute;
    font-size: 24px;
    text-align: center;
    color: #dfafab;
    /** 换行 */
    word-wrap: break-word;
    word-break: break-all;
    /** 超出两行省略号处理 */
    .overflow-hidden();
}

2、正确写法 ✅

在文本内容盒子外面再套一个div盒子（如下面代码里的类名为content的盒子），在其上面加超出多行省略号处理的样式。然后在ios真机上进行测试，就发现问题解决啦~

html

<div className="content">
    /* text: 后端返的文本内容 */
    <div className="text">{text}</div>
</div>

css

@import "../../res.less";
.content {
    width: 367px;
    left: 193px;
    top: 559px;
    position: absolute;
    /** 换行 */
    word-wrap: break-word;
    word-break: break-all;
    /** 超出两行省略号处理 */
    .overflow-hidden();
    .text {
      font-size: 24px;
      text-align: center;
      color: #dfafab;
    }
}
机偶多行quotspanlt

有关2022-12-23 工作记录--CSS-超出多行显示省略号ios真机偶失效问题的更多相关文章

  1. ruby-on-rails - 由于 "wkhtmltopdf"，PDFKIT 显然无法正常工作 - 2

    我在从html页面生成PDF时遇到问题。我正在使用PDFkit。在安装它的过程中，我注意到我需要wkhtmltopdf。所以我也安装了它。我做了PDFkit的文档所说的一切......现在我在尝试加载PDF时遇到了这个错误。这里是错误:commandfailed:"/usr/local/bin/wkhtmltopdf""--margin-right""0.75in""--page-size""Letter""--margin-top""0.75in""--margin-bottom""0.75in""--encoding""UTF-8""--margin-left""0.75in""-

  2. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  3. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No

  4. ruby - 无法让 RSpec 工作—— 'require' : cannot load such file - 2

    我花了三天的时间用头撞墙，试图弄清楚为什么简单的“rake”不能通过我的规范文件。如果您遇到这种情况:任何文件夹路径中都不要有空格!。严重地。事实上，从现在开始，您命名的任何内容都没有空格。这是我的控制台输出:(在/Users/*****/Desktop/LearningRuby/learn_ruby)$rake/Users/*******/Desktop/LearningRuby/learn_ruby/00_hello/hello_spec.rb:116:in`require':cannotloadsuchfile--hello(LoadError) 最佳

  5. ruby-on-rails - rspec should have_select ('cars' , :options => ['volvo' , 'saab' ] 不工作 - 2

    关闭。这个问题需要detailsorclarity.它目前不接受答案。想改进这个问题吗？通过editingthispost添加细节并澄清问题.关闭8年前。Improvethisquestion在首页我有:汽车:VolvoSaabMercedesAudistatic_pages_spec.rb中的测试代码:it"shouldhavetherightselect"dovisithome_pathit{shouldhave_select('cars',:options=>['volvo','saab','mercedes','audi'])}end响应是rspec./spec/request

  6. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  7. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行？ - 2

    这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式ruby​​shell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

  8. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同，而不是下载一半的损坏文件？documentation说IO.copy_stream返回它复制的字节数，但是当我还没有下

  9. Ruby 文件 IO 定界符？ - 2

    我正在尝试解析一个文本文件，该文件每行包含可变数量的单词和数字，如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件？有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符？ 最佳答案 接受的答案将slurp文件，这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的，将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  10. ruby - JetBrains RubyMine 3.2.4 调试器不工作 - 2

    使用Ruby1.9.2运行IDE提示说需要gemruby​​-debug-base19x并提供安装它。但是，在尝试安装它时会显示消息Failedtoinstallgems.Followinggemswerenotinstalled:C:/ProgramFiles(x86)/JetBrains/RubyMine3.2.4/rb/gems/ruby-debug-base19x-0.11.30.pre2.gem:Errorinstallingruby-debug-base19x-0.11.30.pre2.gem:The'linecache19'nativegemrequiresinstall

随机推荐