美文网首页
css实战小技巧

css实战小技巧

作者: 何小鹏 | 来源:发表于2019-01-12 15:18 被阅读10次
  1. Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性

-webkit-text-size-adjust: none;

  1. 修改palceholder内文字的css样式
::-webkit-input-placeholder{
    color: red;
    font-size: 20px;
    line-height: 50px;
 }

在微信小程序中微信有自己的处理方式

在标签里面直接设置一个placeholder-class样式

//WXML文件
      <input type='number' class='phone'   maxlength='11' placeholder-class='phone_PC'></input>
//WXSS文件
      .phone_PC{
            color:#ccc;
            font-size: 32rpx;
        }
  1. CSS控制文字,超出部分显示省略号

如果实现单行文本的溢出显示省略号应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

相关文章

  • css实战小技巧

    Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -web...

  • 笔记1

    1、浮动的小技巧 HTML: CSS:

  • css实战技巧

    css规避脱标标准流(常规流)是极其稳定的写法,很多地方,我们尽量使用标准流优先选择标准,其次使用float,最后...

  • 一周一章前端书·第23周:《HTML与CSS进阶教程》S02E1

    第13章:CSS实战技巧 13.1 水平居中 13.1.1 非块元素的水平居中 文字、inline行内元素和inl...

  • CSS小技巧

    左右布局 左中右布局 水平居中 行内元素水平居中,在其父元素上写text-align: center;。 宽度确定...

  • css小技巧

    利用border实现三角形和平行四边形 效果如图: 三角形的实现利用了上面的方法。 效果如图: 效果如图: 效果如图:

  • css小技巧

    div高度是由什么决定的:div高度是由内部文档流中元素的高度的总和决定的 文字对齐代码: 效果图 单词中断显示:...

  • css小技巧

    最近开始写小程序然后又开始写vue真的是一个头两个大 然后慢慢记录平时的一些前端技巧不定时更新 让子元素在父控件里...

  • CSS小技巧

    1.为div[contenteditable]添加仿placeholder效果div部分 CSS部分 完事儿~

  • CSS小技巧

    1.文字超过两行,隐藏并显示省略号 overflow:hidden; text-overflow:ellips...

网友评论

      本文标题:css实战小技巧

      本文链接:https://www.haomeiwen.com/subject/phbkuftx.html