Javascript 将段落格式化为符合浏览器大小的80%,而不是100%

Javascript 将段落格式化为符合浏览器大小的80%,而不是100%,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在为一个站点创建页面,我不得不使用脚本来整合文本,使其在小型设备和大型设备上都易于阅读 有没有一种方法可以在不改变其他内容的情况下将文本限制在页面的某个百分比?(在浏览器窗口的80%处)与图像非常相似,可以限制为浏览器页面的大小。我是否需要创建一个实际的文本文档并将其作为图像插入 我试过使用“textarea”、“body”、“hgroups”和“p”都没有用。我指的是使用类似于: <img src="example.jpg" width="50%" alt=""/> p {

我正在为一个站点创建页面,我不得不使用

脚本来整合文本,使其在小型设备和大型设备上都易于阅读

有没有一种方法可以在不改变其他内容的情况下将文本限制在页面的某个百分比?(在浏览器窗口的80%处)与图像非常相似,可以限制为浏览器页面的大小。我是否需要创建一个实际的文本文档并将其作为图像插入

我试过使用“textarea”、“body”、“hgroups”和“p”都没有用。我指的是使用类似于:

<img src="example.jpg" width="50%" alt=""/> 
p {
    font-size: 10vw;
}

但有一个文本区域、框等,并允许它以与宽度成反比的方式垂直扩展。我不是很挑剔,只要它不需要滚动条,可以显示整个段落。我不想改变文本本身的大小

从某种意义上说,这使得宽度和高度属性相反,因此所有文本都可以查看。它仍应符合浏览器窗口的某个百分比,而不是默认的100%。我也尝试过使用边框、边距和填充。我觉得我只是缺少了一个关键的组成部分

#some_div{
  width:80%;
  margin-left:none;
 }

如果可能的话,增加80%的宽度,去掉左边空白和填充物。

我不确定我是否完全理解你的意思。它是否使文本像背景图像一样?是否要隐藏所有内容并根据窗口大小进行调整

如果是的话,也许是这个

div.text-bg-container {
  position:absolute;
  width:100%
  height:100%;
  font-size:80%
  z-index:-1;
}

我能想到的最简单的方法是:

p.full-width {
    width:80%;
    padding: 0 20% 0 20%;
    text-align:left;
}
HTML:结构(哪些框位于其他框中)

CSS:样式(设置宽度、边框、动画)

JS:交互(添加单击侦听器,通过http://发送JSON等)


使用DOM选择器以HTML
标记或任何内容为目标: CSS:
.someDivClass{
宽度:80%
}

#someDivID{
左:0%,
右:20%
}


JS:
var element=document.querySelector(“.someDivClass”)

var-element=document.querySelector(“#myID”)

然后

element.setAttribute(“样式”,“宽度:80%”)

element.addEventListener(“单击”),函数(e){
警报(“你好”)
});

比如说


只有一个元素可以有一个唯一的ID
ID=“myDivID”
,其中尽可能多的元素可以在其
标记中定义相同的
class=“myDivClass”
(div是最基本的DOM元素,大多数DOM元素都是一个具有附加烘焙功能的div)


祝你好运

如果需要设置元素相对于浏览器窗口的大小,可以使用。比如:

<img src="example.jpg" width="50%" alt=""/> 
p {
    font-size: 10vw;
}

下面是一个简单的例子。调整浏览器窗口的大小以查看差异。

每当您询问有关堆栈溢出的问题时,您都需要输入代码,或者我们甚至无法注册任何内容。我对编码一无所知,我很抱歉,只是在这几天才这样做。请取消
标签:[请使用类似JSFIDLE的网站或内置的堆栈片段功能(编辑您的帖子,它将成为所见即所得编辑器中的一个选项)要包含当前代码的可复制示例。此外,听起来您只需将
宽度:80%;
应用于包含文本的元素。只需记住也要为父元素设置特定的宽度。这是为了使文本宽度与浏览器窗口宽度的80%一致,同时使高度为0自动重新对齐,这样就不需要在侧边设置滚动条了。谢谢,我会尝试这些方法。我下次开始新页面时会使用这些方法,我对这一点还是新手,我正在尝试找出是否有一种简单的方法,可以按照%的一致性而不是像素宽度来设置此特定页面上的文本区域宽度,因为有很多图像和图像其他内容也可以通过您的编码来调整大小。不过,我下次开始页面时一定会使用这些内容,谢谢!上面的代码只针对类为“全宽”的段落元素。因此,

。此外,如果您需要此功能进行实际操作,只需将p改为textarea即可。啊哈!对不起,我还在学习中。仅使用了一周。只需将其投入使用,就完全符合我的需要!非常感谢您的帮助!!!我会尝试的,谢谢