当li的宽度超出ul时,隐藏不换行

已于 2022-04-08 08:55:54 修改
阅读量5.7k 收藏 2
点赞数
分类专栏： Css 文章标签： css
于 2019-03-12 11:15:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rencaishigepi/article/details/88417003
版权

突然发现不会写样式

需要实现的效果：在ul中，当所有li超过ul的总宽时，隐藏。类似这样：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>ul中的li不换行</title>
    <link rel="stylesheet" href="">
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    ul {
        width: 100%;
        list-style: none;
        overflow-x: auto;
        **white-space:nowrap;**
    }

    li {
        **display:inline;**
        margin-right: 30%;
    }
    </style>
</head>

<body>
    <ul>
        <li><a href>问题</a></li>
        <li><a href>答案</a></li>
        <li><a href>专题</a></li>
    </ul>
</body>

</html>

效果：
在这里插入图片描述
原理：我觉得应该是，行内元素的不换行才可控，块级、行内块不存在。

仿今日头条的导航：https://www.cnblogs.com/access520/p/5283457.html

Whitess007
关注
专栏目录
CSS设置ul内容超出宽度时，可以横向滚动，并隐藏滚动条&设置滚动条的样式
weixin_48596030的博客
04-25 5540
CSS设置ul内容超出宽度时，可以横向滚动，并隐藏滚动条
Html中怎么用CSS让ul中多个li标签不换行横排显示
weixin_33901843的博客
07-03 9388
  布局 通常有三种方式 { 　1. position 　2. float： left --》 其次是这个 　3. block： inline-block  --》 他们推荐我用这个 } 具体描述   由于好久没有写html了， 早已忘的一干二净， 今天忽然想写html，需要在top写个导航条， 但是又不记得li怎么变成行内块标签了， 只能去请教一下前端的同事了 自己找到的答...
解决li超出ul不自动换行问题以及其他的文本自动换行
胖胖的博客
05-20 7648
部分代码如下：（涉及太多东西，我就把主要的拿出来） <li> <a href="#">Tech Partners, Resellers, and Alliances</a> </li> 做导航栏时会遇到，li里面a标签的文本内容超过了ul设置的宽度，没有换行。 解决办法： 1. w...
<li></li>列表中显示文字强制不换行，大于li宽度自动隐藏
日光海岸
09-23 246
li{ display:block;font-size:14px;height:16px;line-height:16px;width:330px;white-space:nowrap;     //强制不换行overflow:hidden;            //自动隐藏文字                                                          ...
强制不换行css ul里的li元素,css怎么让li强制不换行
weixin_39942572的博客
08-04 1254
免费资源网,https://freexyz.cn/li默认是块状元素，总是在新行上开始，占据一整行。首页关于我们联系我们效果图：那么如何强制让li不换行？可以利用display或者float属性，下面来详细介绍一下。方法1：使用display属性给li标签设置“display:inline;”或“display:inline-block;”样式，将li标签显示为内联元素或行内块元素，即可使li标签...
css防止ul下的li里面内容超出换行
热门推荐
ystyaoshengting的专栏
05-21 2万+
摘自 http://blog.163.com/weison_hi/blog/static/176804047201192535224607/   在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里  分别有4个li 这个4个li的宽度根据它们的自身内容长度为80p...
ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏
09-25
在网页设计中，创建一个li列表并实现文字强制不换行，当文字内容超过li元素的宽度时自动隐藏，并在末尾添加省略号，是一种常见的文本显示方式，尤其在新闻列表、文章摘要等场景下。这种效果可以通过CSS样式来实现，...
html ul 自动换行,用word-wrap来解决固定大小ul下的每条li中内容太多时不自动换行问题...
weixin_39967812的博客
05-31 1028
昨天写了个程序，想实现跟发微博一样显示的功能(自己加了些动态显示效果)，在写HTML和CSS的时候，就遇到一个问题：我在设置好高度400px，宽度300px的ul中，当发出去的li中内容是连续一样的英文字母时或者是没有加换行符过长的英文，就会出现内容溢出(li里边的内容跑到ul框外边去了)：如图：经过百度查询之后，竟然没找到有人遇到和我一样的问题，所以就只能找css强制换行的属性了，功夫不负有心人...
ul li内容宽度的问题的解决方案
09-25
当需要在一行内显示多列`<li>`，并希望在内容超出指定宽度时进行换行，可以使用浮动布局（`float:left`）和固定宽度。如以下示例所示： ```html <ul> <li>...</li> <!-- 多个li元素 --> </ul> .menber { ...
css li 超出隐藏代码
10-30
在`<style>`标签中定义了CSS样式规则，然后在`<ul>`元素内放置了多个`<li>`元素，每个元素中包含了重复的文本内容，以演示当文本长度超过`li`元素宽度时，如何显示省略号来代替超出的部分。 总之，通过合理使用`...
css中li设了左浮动,如何使它宽度超过ul以后依然不自动换行，成横排显示？
LuLuke_lucky的博客
04-19 667
ul { white-space:nowrap; } li { display:inline;}
CSS ul li不换行问题
火火火
08-07 1991
默认情况下ul li 会换行，不过当遇到数字的时候，就特别是在数字很多的情况下就不换行了 添加属性  word-wrap:break-word
ul li 横向排列不换行 无需float
Hello_路子
07-02 517
父级的标签需要加上此属性 规定段落中的文本不进行换行 也可用于标签内容： { white-space: nowrap } 当前级的属性需加上此标签 块的属性方式为横向排序 { display: inline-block; }
html li div居中,几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等_html/css_WEB-ITnose...
weixin_30953869的博客
06-17 499
1 div在页面居中的问题1)position值为relative时(相对定位)，css设置属性margin:0 auto;(0 auto，表示上下边界为0，左右则根据宽度自适应相同值,即居中)即可。2)position值为relative时(绝对定位)，css设置属性 text-align:center; left:50%; margin-left:-500px;(左边距margin-...
html ul纵向不换行,ul li列表并排 不换行css布局
weixin_34377037的博客
05-31 6303
如何使用CSS样式让ul li列表标签布局并排显示不换行篇默认ul li布局竖列显示这里CSS5介绍使用两种使用css样式让li标签布局并排显示，一种使用css display，另外一种使用css float浮动。一、使用display让li并排显示CSS样式单词：display:inline1、不换行横向并排CSS代码：li{ display:inline}2、HTML代码片段：CSS5CSS制...
ul左侧有padding值，导致会超出
POJIE19820106的博客
05-29 257
ul左侧有padding值，导致会超出，在通配符设置内外边距为0，即可，例：*{padding:0;margin:0;}。 转载于:https://www.cnblogs.com/Lily-L/p/6917177.html
ul li横向排列php,如何让ul实现横向排列不换行的效果
weixin_29871753的博客
03-16 5920
大家在页面布局时有没有遇到这种情况，让ul横向排列时，它会换行，但是这不是我们希望看到的效果，你知道怎么处理这种情况吗？这篇文章就和大家聊聊如何让ul实现横向排列不换行，感兴趣的欢迎阅读评论。刚学前端不久，尝试着写各种布局。今天想实现一个横向排列的照片列表，于是最先想到的就是利用ul将list-style设置为none。但是这样只是仅仅将ul默认为横向排列，并没有限制ul一定不换行。当ul设置的宽...
关于div＞ul＞li文本超出自适应宽度隐藏问题
Fjslover的博客
11-16 2209
不要给div、ul、li设置宽度，可设置为100% 有多余的代码，没做删除，可自行调试删除，图片背景自己调换，文中还涉及到了 overflow：hidden下li标签图标消失问题，用list-style-position：inside；可解决图标问题，也可以改变图标样式颜色等，多余功能请读者自行探索，作者小白，大佬勿喷，谢谢！！！！ <div class="xa-main2"> <img src="img/img_li-icon.png"> <ul>
css设置列表元素竖向排列2行横向宽度不定超出则显示滚动条
最新发布
09-13
在CSS中，要实现列表元素竖向排列成两行，并且超出部分显示滚动条，可以通过结合几个CSS属性来完成。以下是一个基本的方法： 1. 将列表元素（如`ul`或`div`）设置为弹性布局（`display: flex;`）。 2. 使用`flex-wrap: wrap;`属性使其子元素（如`li`）能够在容器宽度范围内自动换行。 3. 对于竖向排列两行的要求，可以通过设置容器的高度（`height`）和子元素的宽度来控制。 4. 对于超出部分显示滚动条的要求，可以通过设置容器的`overflow-y`属性为`scroll`来实现垂直滚动条。 以下是一个示例CSS代码： ```css ul { display: flex; flex-wrap: wrap; list-style: none; height: 200px; /* 设置容器高度为两行高度 */ padding: 0; margin: 0; } ul > li { width: 50%; /* 每个子元素宽度为容器宽度的50% */ box-sizing: border-box; /* 盒模型为border-box，防止padding和border影响宽度 */ padding: 10px; height: 100px; /* 子元素高度为单行高度 */ } ul { overflow-y: scroll; /* 设置垂直滚动条 */ } ``` HTML结构如下： ```html <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> <!-- 更多列表项 --> </ul> ``` 需要注意的是，这里的高度和宽度是根据具体的列表项内容和样式来调整的，实际应用时可能需要根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值