添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

有时候,看别人网站上,写一个标语类的文字,能刚好填充整个页面宽度,或部分页面宽度。窗口怎么拉伸和缩小,文字都能随之而改变,保持一行不变。


本人通过,网上搜索终于实现了。因为网上的知识点太散,这里给大家整理一下思路,希望对大家有所帮助。


一、在页面加载时(就是打开网页时)js获取,DIV宽度。用到 js 的 window.onload



二、在页面伸缩时,获取DIV宽度。 用到 jQuery  的 $(window).resize


三、js给字体设置计算好的大小


下面是代码

div 部分 给文字预设一个大小,大家根据自己的情况设一个就行。container 为bootstrapt框架的一个属性。


<div class="container">

<div style="overflow:hidden; font-size:24px;" id="dongtai">我是一个中国人应该有中国人的样子</div>

</div>


JS 第一部分:

<script language="javascript">

//当浏览器加载时计算字体大小,并设置

window.onload = function(){


var dongtai=document.getElementById("dongtai");//获取指定 ID 的第一个对象


var fontw=12; //初始的字体大小

var width=dongtai.offsetWidth;//获取DIV的宽度

var lenstr=dongtai.innerHTML.length;//获取DIV内文字长度

dongtai.style.fontSize=parseInt(width/lenstr)+"px";//计算,parseInt取整,然后赋值



// console.log(width);//用日志来查看一些值。及判断出现的错误。

}


</script>


JS 第二部分:


<script language="javascript">

//当窗口变化时,动态计算字体大小,并调整

$(window).resize(function () {

var dongtai=document.getElementById("dongtai");//获取指定 ID 的第一个对象

var fontw=12; //初始的字体大小

var width=dongtai.offsetWidth;//获取DIV的宽度

var lenstr=dongtai.innerHTML.length;//获取DIV内文字长度

dongtai.style.fontSize=parseInt(width/lenstr)+"px";//计算,parseInt取整,然后赋值

//}

})

</script>



全部代码,合并起来。切记:要引入js和jquery文件

<html xmlns=”http://www.w3.org/1999/xhtml”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/bootstrap/bootstrap3.3.7.min.css">
<title>动态计算并改变文字大小</title>
</head>
<script src="/bootstrap/jquery3.2.1.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="/bootstrap/bootstrap3.3.7.min.js"></script>
		<div class="container">      
      <div style="overflow:hidden;font-size:24px;" id="dongtai">我是一个中国人应该有中国人的样子</div>
</body>
</html>
    <script language="javascript">
    //当浏览器加载时计算字体大小,并设置  
    window.onload = function(){
      fontResize();
    //当窗口变化时,动态计算字体大小,并调整
     $(window).resize(function () { 
      fontResize();
    function fontResize(){
    var dongtai=document.getElementById("dongtai");//获取指定 ID 的第一个对象
    var fontw=12; //初始的字体大小
    var width=dongtai.offsetWidth;//获取DIV的宽度
    var lenstr=dongtai.innerHTML.length;//获取DIV内文字长度 
    dongtai.style.fontSize=parseInt(width/lenstr)+"px";//计算,parseInt取整,然后赋值   
</script>


  • IE浏览器无法打开网页,QQ能上仍打不开怎么办 win7 可以正常上网但右下角的网络连接显示红叉,怎么解决? OctoberCms fullPackage 完整包(含数据库文件)提供下载 300元内存条一下子涨到939元,年底有望破千,你怎么看 电脑系统安装从入门到精通(一) 访问共享文件、连接共享打印机时,提示“未知的用户名或者密码错误” IP地址的分类|10开头、172开头、192开头三类地址的区别及对应子网容量、子网掩码 control userpasswords2 的使用,电脑开机自动登录
  •