Question

如果内容在边框中溢出，如何在页面中创建自动水平滚动条。

<html>
     <body>
        <div style ="width: 20px; height:30px; border:1px solid black; overflow:auto">
            <!-- various of text here that can makes it go out the border-->
        </div>  
     </body>
</html>

如果我的内容中的文字太长，如何制作自动水平滚动条怎么办？

Answer 1

以div样式插入：

overflow-x:scroll;

Answer 2

将您的代码更改为：

 <html>
 <body>
    <div style ="width: 20px; height:30px; border:1px solid black; overflow-x:scroll">
        <!-- various of text here that can makes it go out the border-->
    </div>  
 </body>
 </html>

Answer 3

overflow: auto;
white-space: nowrap;

http://jsfiddle.net/GCPDE/

Answer 4

将您的风格改为：

style="width: 20px; height:30px; border:1px solid black; overflow:auto;"

只是语法不正确的情况。

Answer 5

注意：为了使文本可以水平滚动，您必须添加的 溢出 - X：滚动;溢出y：隐藏; white-space：nowrap; 到你的div。

let isExtendUrl = true; //to add query at the end of the url, usually used with GET
let isRequestMethod = 'POST';
let initialQuery = {gender: 'MALE'};
let searchKey = 'name';

let bloodhound = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.whitespace,
    queryTokenizer: Bloodhound.tokenizers.whitespace,

    remote: {
        url: isExtendUrl ? myurl + '%QUERY' : myurl,
        wildcard: '%QUERY',
        filter: function (data) {
            return $.map(data.content, function (obj) {
                return obj;
            });
        }
    }
});

if (isRequestMethod == 'POST') {
    let prepare = function (query, settings) {
        initialQuery[searchKey] = query;
        settings.type = "POST";
        settings.contentType = "application/json; charset=UTF-8";
        settings.data = JSON.stringify(initialQuery);

        return settings;
    }
    bloodhound.remote.prepare = prepare;
}

水平滚动条

5 个答案: