目录

前端问题汇总

如何让input文本框和图片对齐

在默认情况下,input文本框和图片无法自然对齐,总会有所偏差,文本框往往会比图片要往下边一点,只要给元素添加vertical-align:bottom即可令两者底部水平对齐,代码如下:

1
2
<input type="text" style="vertical-align:bottom">
<img src = "images/露琪亚.jpg" width = "50%" height = "50%" alt = "露琪亚" title = "死神里的露琪亚"  style="vertical-align:bottom">

另外还可通过vertical-align的其他属性进行垂直布局。

如何设置透明度属性

1
2
3
4
5
6
7
8
<!-- IE8 以及更早的版本 -->
filter:alpha(opacity=50);   
<!-- 火狐浏览器 -->
-moz-opacity:0.5;   
<!-- Konqueror浏览器 -->
-khtml-opacity: 0.5;   
<!-- 所有浏览器都支持的一个css属性 -->
opacity: 0.5;

如何通过选中文字来勾选/取消复选框

想要在选中文字的时候就自动勾选或取消复选框,有两种实现的方式:

方式一:在复选框的外边包上label标签

1
<label><input type="checkbox">233333333</label>

方式二:通过label标签的for属性来联动某一个复选框

1
2
<input type="checkbox" id="check1">
<label for="check1">55555555555</label>

另外,当复选框和文字无法对齐的时候,可以在复选框里添加style="vertical-align: sub;"来实现对齐。

如何屏蔽双击选中文本

IE浏览器可以通过在某个标签里添加onselectstart="return false"来屏蔽双击选中文本,该属性在火狐中无效,火狐需要用style="-moz-user-select:none;"。此外还可以在body里添加该属性来实现整个网页都无法选中文字。

类似的属性属性还有:

  • 禁止鼠标右键:oncontextmenu="return false"
  • 禁止拖放:ondragstart="return false"
  • 禁止拷贝:oncopy=document.selection.empty()
  • 禁止复制:oncopy = "return false"
  • 禁止保存:<noscript><iframe src="*.htm"></iframe></noscript>,放在head里面。
  • 禁止粘贴:<input type=text onpaste="return false">
  • 禁止剪贴:oncut = "return false"
  • 关闭输入法:<input style="ime-mode:disabled">

文本自动换行问题

当行内出现很长的英文单词或者url的时候,会出现自动换行的问题,为了美化页面,往往会希望这些很长的英文单词或者url能够断开来,超出的部分换行到下一行。

可以通过使用两个属性来实现该需求:

1
2
word-wrap:break-word;
word-break:break-all;

word-wrap

word-wrap用来控制换行,有两种取值:

  • normal
  • break-word(此值用来强制换行,内容将在边界内换行,中文没有任何问题,英文语句也没问题。但是对于长串的英文,就不起作用。)

word-break

word-break用来控制断词,有三种取值:

  • normal
  • break-all(是断开单词。在单词到边界时,下个字母自动到下一行。主要解决了长串英文的问题。)
  • keep-all(是指Chinese, Japanese, and Korean不断词,一句话一行,可以用来排列古诗哟~)

文本溢出控制

单行溢出

text-overflow是CSS3中的属性,规定了文本溢出后的显示样式,但它不会强制文本溢出,所以有时候会不生效。该属性支持的值如下:

  • clip:默认值,将溢出的文本裁减掉
  • ellipsis:将溢出的文本用省略号(…)来表示
  • <string>:设置一个字符串用来表示溢出的文本

兼容性上,除了<string>外,其余两个属性兼容到了IE6+,所以大可放心使用。

为了让该属性生效,解决方法如下:

1
2
3
4
width: 100%;  /*也可以是固定值、min-width这些*/
white-space: nowrap;  /*强制文本不能换行*/
overflow: hidden;  /*隐藏溢出内容*/
text-overflow: ellipsis;

多行溢出

通过display: -webkit-box;可以实现多行溢出:

1
2
3
4
5
6
7
width: 100%;
overflow: hidden;
word-break: break-all;  /*允许在单词内换行,更美观*/
text-overflow: ellipsis;
display: -webkit-box;  /*元素作为box伸缩盒子*/
-webkit-line-clamp: 3;  /*设置文本行数限制*/
-webkit-box-orient: vertical;  /*设置文本排列方式*/

JS文件中的中文在网页上显示为乱码

如果页面已经设置了<meta charset="utf-8">,JS文件里的中文在网页上仍然显示为乱码,可能是由于JS文件的编码问题导致的。

JS文件本身的编码默认为ANSI编码,而引入该JS文件的页面则使用了utf-8编码,所以导致了中文乱码。解决方法是将该JS文件自身的编码改为utf-8编码,可以借助常用的编辑器比如Nodepad++或者Editplus等来修改JS文件自身的编码。

参考链接

警告
本文最后更新于 January 26, 2021,文中内容可能已过时,请谨慎使用。