记事本,word等以回车
换行
。html以或等会形成一行。如何统一txt与 html,就是在普通txt的开头加一个pre标签。这样,作为txt,它仍能在文本编辑器中,方便地阅读、编辑、搜索。同时,又能在
浏览器
下直接保持格 式显示。
pre 标签,是以txt为html的关键。它让txt中的tab缩进、回车
换行
仍能保留在html中。
但直接使用会导致过长的文字撑宽
浏览器
,要想自动
换行
,需要如下写法
本文用示例介绍
浏览器
使用
控制台
(console)调试前端的方法。
Console API提供了允许开发人员执行调试任务的功能,Console对象提供了
浏览器
控制台
调试的接口。
浏览器
都实现了这个接口,比如:谷歌
浏览器
、火狐
浏览器
、360
浏览器
、Safari
浏览器
、IE
浏览器
等等。也就是说:所有
浏览器
都可以用console进行调试。
MDN:Console - Web API 接口参考 | MDN
谷歌
浏览器
:https://devel...
浏览器
自带的自动
换行
各
浏览器
自身都带有自动
换行
功能,当
浏览器
显示文本的时候会让文本在
浏览器
或者div元素的右端自动
换行
。
换行
情况如下:
1.non-CJK:会在半角空格或者连字符(-)位置自动
换行
,不会在长单词的中间
换行
2.CJK(中日韩):可以在任何一个CJK字体后
换行
3.CJK中包含non-CJK:non-CJK部分按 non-CJK情况处理进行
换行
处理
4.CJK中含有标点符号时,
浏览器
不会让标点符号位于一个行的行首,会使标点符号和前一个字符组成一个整体进行
换行
。
从上面可知,如果文本中存在
换行
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var flakes = [];
function Flake() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random() * 3 + 2;
this.speed = Math.random() * 1 + .5;
this.opacity = Math.random() * .5 + .5;
Flake.prototype.draw = function() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, , Math.PI * 2);
ctx.fillStyle = 'rgba(255, 255, 255, ' + this.opacity + ')';
ctx.fill();
Flake.prototype.update = function() {
this.y += this.speed;
if (this.y > canvas.height) {
this.y = -this.radius;
this.x = Math.random() * canvas.width;
for (var i = ; i < 100; i++) {
flakes.push(new Flake());
function animate() {
ctx.clearRect(, , canvas.width, canvas.height);
for (var i = ; i < flakes.length; i++) {
flakes[i].draw();
flakes[i].update();
requestAnimationFrame(animate);
animate();
这段代码可以在
浏览器
控制台
中运行,生成雪花效果。