Question

我正在为网站创建网页，而且我一直不得不使用<br>脚本来符合文字，以便在较小的设备上以及更大的设备上轻松阅读。

有没有办法将文本约束到页面的百分比而不改变其他内容？（在浏览器窗口的80％处）非常像图像可以约束到浏览器页面的大小。我是否需要创建一个实际的文本文档并将其作为图像插入？

我尝试过使用＆＃34; textarea＆＃34;，＆＃34; body＆＃34;，＆＃34; hgroups＆＃34;，＆＃34; p＆＃34;无济于事。我指的是使用类似的东西：

<img src="example.jpg" width="50%" alt=""/>

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

在某种意义上，它使宽度和高度反转属性，以便所有文本都可以查看。它应该仍然符合窗口某个百分比的浏览器窗口，而不是默认的100％。我也尝试过使用边框，边距和填充。我感觉我只是错过了一个关键部分。

Answer 1

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

将宽度添加为80％并取出左边距并尽可能填充。

Answer 2

我不确定我是否理解你。它是否使文本像背景图像？要落后于所有内容并根据窗口大小进行调整？

如果是这样，也许这个？

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

Answer 3

我能想到的最简单的方式：

p.full-width {
    width:80%;
    padding: 0 20% 0 20%;
    text-align:left;
}

Answer 4

HTML：结构（哪些框在其他框内）

CSS：样式（设置宽度，边框，动画）

JS：交互（添加点击侦听器，通过http：//发送JSON等）

使用DOM选择器定位HTML `<div>`标记或其他内容：

CSS：

.someDivClass { width: 80% }

#someDivID { left: 0%, right: 20% }

var element = document.querySelector(".someDivClass")

或

var element = document.querySelector("#myID")

然后

element.setAttribute("style", "width:80%");

或

element.addEventListener("click", function (e) { alert('hello') });

例如

只有一个元素可以拥有唯一ID id="myDivID"，其中尽可能多的元素可以在class="myDivClass"标记中定义相同的<div>（div是最基本的DOM元素，而且大多数每个DOM元素都是一个带有附加功能的div，默认情况下为功能烘焙）

祝你好运！

Answer 5

如果您需要相对于浏览器窗口设置元素的大小，可以使用Viewport-percentage lengths。类似的东西：

p {
    font-size: 10vw;
}

这是一个简单的jsFiddle示例。调整浏览器窗口大小以查看差异。