具有上一个/下一个按钮的固定宽度和高度的文本容器

Fixed Width and Height Text Container with Prev/Next Button

本文关键字：高度 文本 固定宽度 上一个 下一个 按钮      更新时间：2023-09-26

我想创建一个具有固定宽度和高度的文本容器，如图所示。

以下是方框的外观示例：https://i.stack.imgur.com/9E0QR.jpg

我试过了，滚动条框不起作用。

使用的代码示例：

CSS代码：

.box{
	direction:rtl;
    position:absolute;
    width: 50%;
    height: 50%;
    top:0;
    left:0;
    overflow:auto;
    border: solid #000 2px;
}
.box-text {
 text-align:left;
 direction:ltr;
}
::-webkit-scrollbar {
    width: 13px;
    height: 13px;
}
::-webkit-scrollbar-button {
    color: #0000;
}    
HTML Code
<div class="box"> 
 <div class="box-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend hendrerit magna, ac tristique nulla vestibulum id. Aenean aliquam vehicula nunc sit amet convallis. Mauris sit amet lectus a metus accumsan dignissim. Integer pharetra quam nec lectus mattis lobortis. Aliquam id risus vel ante ornare rhoncus ac quis lacus. Duis dignissim urna sed leo dictum fermentum. Vivamus id orci odio, in congue quam.
Mauris adipiscing justo nec dui vulputate vel dapibus urna fermentum. Aliquam dictum erat at urna molestie consectetur ut quis justo. Aliquam eu est mauris, ac condimentum erat. Aliquam pellentesque sem cursus quam feugiat at dignissim sem bibendum. Phasellus convallis commodo justo, dapibus egestas nisl ultricies non. Ut dui mauris, blandit ac tincidunt quis, interdum eget erat. Fusce nisi quam, tincidunt sed blandit eget, euismod eu felis. Sed consequat ligula id lacus fringilla quis mollis leo commodo. Morbi quis elementum diam. Vestibulum ultrices nunc nec nisl imperdiet molestie. Maecenas rutrum viverra dignissim. Nulla et orci ut nisl volutpat eleifend. Donec scelerisque elit ac arcu iaculis luctus.
Donec orci lectus, bibendum quis egestas vitae, cursus fringilla tellus. Cras at ipsum augue. Ut ornare eleifend volutpat. Morbi tristique sapien sed ipsum sodales non pharetra tellus porttitor. Aenean justo mi, tincidunt sit amet aliquam vitae, ornare ac libero. Donec faucibus ultrices augue non cursus. Pellentesque a ipsum eros, a rhoncus arcu. Mauris massa purus, tempus ultrices fermentum vel, sagittis id eros. Nam id massa dapibus mauris convallis imperdiet. Nullam erat dui, aliquet eu dignissim vel, convallis vitae enim. Quisque vel nulla dolor, nec mollis tortor. Phasellus fermentum velit eu ante pharetra interdum.
Aliquam pharetra, urna sit amet tincidunt ullamcorper, felis lectus posuere dui, ut bibendum lectus mi quis mi. Aliquam erat volutpat. Curabitur volutpat accumsan urna a aliquam. Ut quis tellus at quam ornare sollicitudin id et odio. Etiam fermentum pharetra orci, in posuere nisi condimentum at. Sed mattis accumsan convallis. Ut commodo posuere laoreet. Curabitur iaculis vestibulum arcu, vel egestas nibh tristique semper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris consequat dui non sapien consequat euismod. Nulla facilisi. Etiam venenatis ligula id risus auctor eu faucibus est adipiscing. Quisque elit justo, vehicula sed dapibus nec, viverra ultrices est. Nunc vel orci eu dui vehicula vehicula tincidunt sagittis dui.
Etiam odio ipsum, feugiat vel vulputate ac, eleifend ut lacus. Aliquam erat volutpat. Vivamus tellus ante, scelerisque sed sollicitudin vitae, semper in mauris. Curabitur non elit risus. Nam vitae facilisis enim. Nam pulvinar, eros at fringilla molestie, nisi diam ultricies diam, consectetur facilisis mi felis vitae lectus. Mauris augue sem, rhoncus sit amet varius at, venenatis at dolor. Quisque pharetra, erat at blandit venenatis, massa urna eleifend felis, in luctus tortor ligula nec urna. Nam aliquam blandit justo, eu ornare leo luctus a. Proin id volutpat augue. Praesent mollis tempor mi et congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
</div></div>

有什么建议吗？

您想固定框还是框文本？如果是整个框，则无法使用%实现固定的宽度或高度。你应该用px表示。如果你需要使用%，那么你可以添加一个脚本，在加载html 后替换宽度和高度属性

<script>
    var boxWidth = document.getElementById('myId').offsetWidth;
    var boxHeight = document.getElementById('myId').offsetWidth;
    document.getElementById('myId').style.width = boxWidth + "px";
    document.getElementById('myId').style.height = boxHeight + "px";
</script>

请记住将"myId"分配给您的箱子div

溢出框的一个简单示例：http://jsfiddle.net/fixit/v5kumrah/

使用"叠加"值：

.box-text {
    border: 1px solid black;
    background-color: lightblue;
    width: 300px;
    height: 210px;
    overflow: overlay;
}
相关文章：