精华内容
下载资源
问答
  • 在HTML页面上展开/折叠最简单的方法是什么?背景: 我使用了一个定制的CMS,我可以在其中粘贴HTML并且还可以编辑CSS。但是我无法添加特殊的库。我遇到的问题是,当我点击展开时,浏览器会转到屏幕的顶部,而不是...

    什么是最简单的方法可以让HTML页面上的某些行在被点击时展开(和折叠)?在HTML页面上展开/折叠行最简单的方法是什么?

    背景: 我使用了一个定制的CMS,我可以在其中粘贴HTML并且还可以编辑CSS。但是我无法添加特殊的库。

    我遇到的问题是,当我点击展开时,浏览器会转到屏幕的顶部,而不是保持原位。

    我的代码看起来大致是这样的:

    function toggleView(id, link) {

    var e = document.getElementById(id);

    if (e.style.display == '') {

    e.style.display = 'none';

    link.innerHTML = '(+)';

    } else {

    e.style.display = '';

    link.innerHTML = '(-)';

    }

    }

    This is my headline (+)

    This is my detailed content Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc fermentum.

    可这在纯CSS来实现或者是它更好地使用JavaScript?

    对不起,新手问题,但我找不到答案在别处。

    J

    +0

    卸下'HREF = “#”'。这导致浏览器跳转到该页面的顶部的锚点。而是使用'href =“javascript:void(0);”' –

    +0

    太棒了!很容易当你知道如何:) 非常感谢 J –

    展开全文
  • <code><!DOCTYPE html> <..."en">...为什么我给th2和td3中间加一个空div就会自动折行?原理是什么? 但是为什么给表格外层加上table标签就不会自动折行?  </p>
  • PB 表格自适应行高,折行显示

    千次阅读 2018-10-17 18:07:13
    百度的调各种auto height什么的都不管用 千钧一发之际。 打开设计器 Y1 Y2 的意思就是 竖线的头尾。 设Y2="80~trowheight() - 4" 做好一个看看效果。可以之后,复制粘贴就了 怎么做...

     

    因需求开发报表,所以。。。。遇到了这种情况

     

     

    这个边框是字段的general》border属性 加了一个边框 box(2) 做出来就是这种效果

    百度的调各种auto height什么的都不管用

    千钧一发之际。 打开设计器

    Y1 Y2 的意思就是 竖线的头尾。 设Y2="80~trowheight() - 4" 

    做好一个看看效果。可以之后,复制粘贴就行了

    怎么做到的边框。那当然是一条线一条线拼的。。

    仔细看一下还是有没拼接好的,效果就下图这样: 

    祝大家好运!

     

     

    展开全文
  • 交叉表部的折叠与展开(不知专业术语叫什么,暂时先这么叫吧): 点击标题左边的“+”号,可展开该行的二级节点,再点击则隐藏。 附件制作过程的录像,和js源代码:
  • 交叉表部的折叠与展开(不知专业术语叫什么,暂时先这么叫吧): 点击标题左边的“+”号,可展开该行的二级节点,再点击则隐藏。 附件制作过程的录像,和js源代码 因录像exe格式文件,360可能会报有木马,...
  • 但这样虽然开发简单但用户体验肯定不好,如果搜索项比较短的话显示尚且完整,若搜索内容略长,就完全看不出自己之前搜索的是什么。 现在要将其改为自适应长度,搜索项最多占用一,超出一部分省略,一般情况也...

    搜索的时候记录用户搜索历史,开始为了开发方便固定了每个搜索项的宽度,每行固定展示几项,类似下图:
    在这里插入图片描述
    但这样虽然开发简单但用户体验肯定不好,如果搜索项比较短的话显示尚且完整,若搜索内容略长,就完全看不出自己之前搜索的是什么。
    现在要将其改为自适应长度,搜索项最多占用一行,超出一行部分省略,一般情况也不会超出一行。然后当按钮所占行数超过两行则自动隐藏超出部分,显示折叠按钮,可以点开或者折叠超出部分。
    难点在于,因为搜索项是自适应长度,你无法判断每一行会展示几个搜索项,也无法判断折叠点按钮放在哪一项之后。

    这个需求在京东上体验效果最好,但京东是右侧额外提供了一段空白用来安放折叠按钮,视觉上不太舒服。

    淘宝的实现是基于js,先展示出所有的搜索项,然后js判断,超出后进行折叠,视觉上差不多了,但是打开搜索页面会很明显的先看到所有的搜索项,然后自动折叠隐藏,用户体验略差。
    接下来提供下项目中遇到这个需求我的实现方式。

    主要要解决的问题:
    1. 搜索项根据文本自适应宽度
    2. 每一行不在控制展示多少项
    3. 要判断是否超出两行,超出两行则进行折叠
    4. 保证折叠按钮不管展开还是收缩都要跟在最后一个搜索项后

    首先,自适应宽度比较简单,不指定搜索项宽度,提供padding来使长度自适应

        display: inline-block;
        align-items: center;
        border-radius: 1rem;
        box-sizing: border-box;
        height: 0.56rem;
        line-height: 0.56rem;
        margin-bottom: 0.24rem;
        text-align: center;
        padding: 0 0.28rem;
        font-size: 0.24rem;
        color: #666;
        background-color: #F6F7FA;
        margin-right: .2rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    

    其中这段代码主要为了长度超出截断展示省略号,并限制每一项长度最多不超过一行

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    

    然后,要判断整体内容的高度是否超过了两行,可以通过获取容器的高度来实现,但这里并不采用这种方式。

    采用的方式是js获取父容器所有的子节点,然后进行遍历操作,根据子节点的offsetLeft属性进行判断,因为最左边的那个节点的offsetLeft永远是0,所以可以判断出现了几行,先上代码:

    
        /**
         * @description 历史记录 页面超出两行截取数据
         */
        toggleHistoryData() {
          let idx = 0
          let count = 0
          this.$nextTick(() => {
            let ulChid = document.querySelector('.history-content').childNodes//获取父容器所有子节点
            ulChid.forEach((i, index) => {
              console.log(i + ':', i.offsetLeft)
              if (i.offsetLeft === 0) {
                count++
                if (count === 3) {
                  idx = index - 1
                  this.hasMoreBtn = true
                }
              }
            })
            // 超过2行截断数据
            if (idx > 0) {
              this.historySearchListShow = this.historySearchList.slice(0, idx)
            } else {
              this.historySearchListShow = this.historySearchList
            }
          })
        },
    

    这里会先便利容器的所有子节点,每出现一个offsetLeft=0,代表出现了一个新行,若出现第三个offsetLeft=0则代表超出两行,显示折叠按钮,并且获取第三个offsetleft=0前一个节点的索引。

    最后截断数据源使搜索项不超出两行,这里注意的是,实际返回的数据是满两行的数据但去掉第二行的最后一个,因为这里要放一个折叠按钮。

    这样的话就可以在布局的时候直接把折叠按钮放在搜索项的末尾,只是控制展示与否,如下

    <ul :class="{'history-content':true,'history-hide':!showMore}" v-if="historySearchList.length">
          <li class="van-ellipsis" v-for="(item, index) in historySearchListShow" :key="index" @click="doHistorySearch(item)">{{ item }}</li>
          <span class="icon-more" v-if="!showMore && hasMoreBtn" @click="toggleShowMore"></span>
          <span class="icon-more-hide" v-if="showMore && hasMoreBtn" @click="toggleShowMore"></span>
        </ul>
    

    这里可能会有疑问,如果第一次把数据截断展示,那第二次判断的时候实际不是拿全部的数据做判断二是阶段后的肯定不满两行的数据。

    其实这里,当首次加载是肯定没有问题,然后页面中第一次点折叠按钮他会走不满两行的逻辑,这里会把全部的数据重新付给展示给前端的字段,这样保证当再次折叠时,实际还是基于完整的数据进行判断的。

    目前只知道淘宝也是基于js实现的,但不了解他的实现方式。这种实现方式虽然也是先展示全部数据再折叠,但明显效率要高于淘宝,并且同时没有京东末尾空白的问题。

    最后效果:
    在这里插入图片描述

    在这里插入图片描述
    如有疑问欢迎评论区回复。

    展开全文
  • 最近调试程序,遇到如下问题: ...那么问题来了,noWrap到底是什么? HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。  但使用时要注意的是,td元素noWrap属性的行为与td元素的widt

    最近调试程序,遇到如下问题:

    也就是这个表格里面的文字被换行了,究其原因,主要是td中的width之和超过了100%导致的。谷歌了好久,终于发现,可以用noWrap="noWrap"来解决。

    那么问题来了,noWrap到底是什么?

      HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。

      但使用时要注意的是,td元素noWrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属性起作用的,如果设置了td宽度,则nowrap属性不起作用。

      nowrap表示是否允许表格中的文本换行
      nowrap=true的时候不能换行
      nowrap=false可以换行

           解释如下:在内容超过了td的宽度时,内容才会出现换行,并且防止td的宽度被挤压,保证td能够真实的占有其自身定义的width,如果此时行中Td的宽度之和大于表格的现有宽度了,那么表格会增加自身的宽度来适应td宽度之和,而不是由表格的宽度来限制td的宽度。而在不定义nowrap的情况是,td的宽度会被尽量挤压以适应表格的总宽度定义,因此就出现了如上图所示的情况。

          于是,在代码中加入noWrap="noWrap",就解决了刚刚出现的问题

    出来的结果:

    问题得到解决。特此做笔记以说明!

     

    展开全文
  • Collapser一个小型实用的jQuery插件,可通过灵活的API通过单词,字符和折叠/截断元素文本。 它一款具有多种功能的多合一插件,可根据需要截断段落或任何元素。 - - 为什么需要它? Collapser在截断长字符...
  • 早上老婆发来一篇关于“房贷七优惠利率”的新闻中写到,建设银行、工商银行、中国银行、农业银行四大关于存量房贷优惠利率措施终于在新年第一天松口:只要2008年10月27日前执行基准利率0.85倍优惠、无不良信用...
  • 我以前用在一个项目中的,如有些地方不适用于你,你可以修改部分代码。功能: 按列分色; 过长内容自动隐藏;... 还有些什么我也不记得了。使用方法:1、下载HTC文件/Files/thinhunan/guidv2.rar...
  • 边旅游边工作一种什么样的感受

    千次阅读 热门讨论 2019-04-23 07:28:47
    今天世界读书日,正所谓读万卷书,万里路。今天给大家分享一下前些时日边旅游边工作的一些感悟。 无论在职工作或是自由职业,爱好旅游的朋友都有这样一个梦想,要是能够一边旅行,一边工作,既能挣钱又能休闲...
  • 什么是IPO

    千次阅读 2007-08-05 20:02:00
    首次公开募股(Initial Public Offerings,简称IPO),指企业透过证券交易所首次公开向投资者增发股票,以期募集用于企业发展资金的过程。 对应于一级市场,大部分公开发行股票由投资银行集团承销而进入市场,银行...
  • 其实非常简单的理解就是在编辑器对文档进行编写的时候,如果启用了 Soft-wrap, 能够帮助你进行软分行,或者说是折行。 看下图: 我们可以看到底 248 行非常长,已经超过了编辑器的可视范围。 如果你需要对...
  • 什么是文档标准流

    2017-12-21 17:19:33
    3、 自动换行,一写不满,换行 4、 块级元素和行内元素: 行内元素特性:行内元素可以与其他行内元素并排,在一排上面显示  不能设置宽和高,默认高度文字的高和宽。 块级元素特性:独占一,不与其他...
  • 什么是欧式期权与美式期权? 按期权买方执行期权的时限划分,分为欧式期权和美式期权。 欧式期权指期权买方只能在期权到期日执行的期权。 美式期权指期权买方可以在期权到期前任一交易日或到期日执行的期权。 ...
  • 利用pair解决简单的付费问题 题目描述:有家奇怪的餐厅,为什么说奇怪呢?一是餐厅提供的菜品比较奇怪,二是付费的规则比较奇怪,每个人有不同的折扣上限(单人从总结里...输入数据有多组,每组占N+1行,第一行是N...
  • 新入的程序猿,学什么最好?JAVA啊!.Net还想来抢生意??算了吧,你们微软就是万恶之源,你们最不愿意贡献的JS还好意思,除了一个前端交互还能干吗?PHP就一脚本而已!企业级应用谁更适合?除了万能的Java,有...
  • <P>标签它一个段落标签,它和<br>标签不一样。会自行起一行段落,并且可以作为一个盒子来使用。可以单独定义它。 比如下图: <p>这个就是一个段落<...所以当你不想要折行新起一个段落的...
  • 我以前用在一个项目中的,如有些地方不适用于你,你可以修改部分代码。功能: 按列分色; 过长内容自动隐藏;... 还有些什么我也不记得了。 使用方法:1、下载HTC文件/Files/thinhunan/guidv2.rar;...
  • Binance Coin由币安发行的代币,简称BNB,基于以太坊Ethereum的去中心化的区块链数字资产。发行总量恒定为2亿个,每个季度根据币安平台当季交易量对BNB进行销毁,销毁记录将会第一时间公布,用户可通过区块链...
  • .什么是述职报告

    千次阅读 2011-12-26 22:58:56
    述职报告一般由首部、正文和落款三个部分组成。 1.首部。主要包括标题、主送机关或称谓等内容。 (1)标题。述职报告的标题有单标题和双标题之分。单标题一般为"述职报告",也可以在...标题之下第一顶格写主送机关或称
  • 百度创意断句符用来确定创意中标题和描述的截断或折行位置,当且仅当推广结果在右侧推广链接位置展现时有效,断句符用符号“^”(不含引号)表示。可以在创意的标题和描述中插入“^”,这样当推广结果在右侧推广...
  • 这个折行是怎么来的?是以前一个谬论,说一行长度要限制,最好不超过70个字符。听起来有道理,实际上早就落伍了。  70限制,在汇编、C的时代,有一点道理,防止有些坏习惯的人写很长的行。注意,只是有一点道理。...
  • 什么是封闭式基金?如何买卖?

    千次阅读 2008-01-10 16:43:00
    封闭式基金属于信托基金,指基金规模在发行前已确定、在发行完毕后的规定期限内固定不变并在证券市场上交易的投资基金。 由于封闭式基金在证券交易所的交易采取竞价的方式,因此交易价格受到市场供求关系的影响而...
  • 盟APP v1.0.rar

    2019-08-30 05:43:36
    她到底是什么,又有什么作用? 她是一款手机应用软件; 她是一款专门为企业服务的手机应用软件; 她是一款能够将企业各种信息放入其中并进行推广传播的手机应用软件! 只要轻轻一点,企业的简介,产品信息以及其他...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 375
精华内容 150
关键字:

折行是什么