html 中 nowrap是用来强制不换行的

  1. 排版

    对包裹plain text的标签使用nowrap属性即刻实现强制不换行.

    如:
    <p nowrap>强制不换行</p>
    <p style="white-space:nowrap">强制不换行</p>

  2. 使用div的超文本

    把div,h1,section,nav,a,li等元素 强制变成行内元素
    display:inline;

    然后就能够像第一种情况一样对其进行操作.


例子: 父级nav限宽下ul元素强制不换行

使子标签ul自身有wrap-content(借用android layout的关键形容词)的宽度
nav>ul>li*10>a[href='#']{随机链接$}

nav{ 固定宽度width:40em; nowrap属性white-space:nowrap; }

ul,li,a{ 行内元素display:inline; 消除浮动float:none; }

// li 变成inline是必要的

当ul不为inline的时候,ul本身宽度最大值为父级nav的宽度;

当ul为inline 的时候,ul宽度为wrap-content宽度.

demo见我的导航

html 元素 强制不换行的更多相关文章

  1. CSS样式自动换行(强制换行)与强制不换行

    自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 对于div,p等块级元素,正常文字的换行(亚洲文字和非亚洲文字)元素拥 ...

  2. CSS 实现自动换行、强制换行、强制不换行的属性

    实现效果 1.自动换行: word-wrap:break-word; word-break:normal; 2.强制换行: word-break:break-all;       按字符截断换行 /* ...

  3. a标签强制不换行

    a标签文字强制不换行 强制不换行 a{ white-space:nowrap; } 再补充说明所有关于换行的CSS样式: white-space: normal|pre|nowrap|pre-wrap ...

  4. <a>标签文字强制不换行

    强制不换行 a{ white-space:nowrap; } 再补充说明所有关于换行的CSS样式: white-space: normal|pre|nowrap|pre-wrap|pre-line|i ...

  5. table中强制不换行

    总是一些文章说要强制换行,很少提到说如何不换行. 一般都会使用word-break: keep-all;使得强制不换行. HTML <!DOCTYPE html PUBLIC "-// ...

  6. CSS自己主动换行、强制不换行、强制断行、超出显示省略号

    P标签是默认是自己主动换行的,因此设置好宽度之后,可以较好的实现效果,可是近期的项目中发现,使用ajax载入数据之后.p标签内的内容没有换行,导致布局错乱,于是尝试着使用换行样式,尽管攻克了问题.可是 ...

  7. CSS自动换行、强制不换行、强制断行、超出显示省略号

    转自:https://blog.csdn.net/liuyan19891230/article/details/50969393 P标签是默认是自动换行的,因此设置好宽度之后,能够较好的实现效果,但是 ...

  8. css实现强制不换行/自动换行/强制换行

    在我们日常的编码中经常会遇到这段文字不可以换行,或者自动换行的需求.虽然这个功能在我们平时很常见但是我相信大家一定不会可以的去记住它吧(至少小月是很懒惰的从来是用什么查什么 ♦ 嘻嘻...).今天我们 ...

  9. CSS强制英文、中文换行与不换行 强制英文换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...

随机推荐

  1. QT:Qt Creator使用CTRL+C后变成了光标覆盖,插入模式

    菜单栏→工具→选项→FakeVim→取消勾选"使用FakeVim"

  2. 自定义 serializers.ValidationError 的错误返回

    在使用DRF进行反序列过程中,总是需要校验字段,然后返回错误结果.可以使用默认的自定义校验项,也可以自定义校验项.而默认的自定义校验项总是差强人意. 版本 Django 2.2.3 Python 3. ...

  3. OA办公软件篇(一)—组织架构

    OA办公软件篇(一)-组织架构 背景 作用 迭代历程 具体实现 写在最后   背景 在说组织架构之前,我们先来说说OA本身. 百度百科解释OA为:办公自动化(Office Automation,简称O ...

  4. springCould注解和配置以及pom依赖

    SpringCloud注解和配置以及pom依赖说明 在本文中说明了pom依赖可以支持什么功能,以及支持什么注解,引入该依赖可以在application.properties中添加什么配置. 1.Spr ...

  5. 【人才】亚马逊数据科学家JD

    Sr. Data Scientist - Amazon Homepage US, WA, Seattle • Job ID 271528 • Amazon Corporate LLC Job Desc ...

  6. php使用cvs导出百万条数据,大量数据

    MySQL CREATE TABLE `user` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(45) NOT NULL DEFAUL ...

  7. LGP1397题解

    并不是那么的有意思呢 首先,我们可以将题目给出的地推式看做一个一次函数 \(k * x+b\),来思考一个问题,如果给出两个一次函数 \(F(x)\) 和 \(G(x)\),那么 \(F(G(x))\ ...

  8. Django基础必会

    Django基础必会 Django项目目录 mysite -mysite -__init__.py -urls.py(函数和函数的对应关系) -settings.py(Django项目的配置信息) - ...

  9. linux下安装简单的文件上传与下载工具 lrzsz

    编译安装 1.从下面的网站下载 lrzsz-1.12.20.tar.gz wget https://ohse.de/uwe/releases/lrzsz-0.12.20.tar.gz 2.查看里面的I ...

  10. Docker容器入门实践

    Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linux 基金会,遵从了 ...