css3属性将单词换行并添加中划线（连字符）

最新推荐文章于 2024-05-13 14:25:36 发布
最新推荐文章于 2024-05-13 14:25:36 发布
阅读量5k 收藏 2
点赞数
分类专栏： css 文章标签： css3换行
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bonjours/article/details/103827812
版权

1、HTML页面，必须为英文语言

<html lang="en-US">

2、CSS页面：

.product-desc{ width:520px; max-height:160px; overflow:hidden; hyphens:auto}

效果：这样就把单词performance换行并添加连字符了。

如果不添加hyphens:auto，后面就空出一截不好看：

如果添加text-align:justify，强制两端对齐单词间距就会很大，也不好看：

由于设置了语言，lang="en-US"，对中文无影响：

Bonjours
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
英文字符换行加连接符的方式，目前火狐可以，其他浏览器需要查看是哪个版本
sunsineq的专栏
03-05 1000
hyphens Summary CSS属性hyphens告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符，也可以控制浏览器什么时候使用，或者让浏览器决定什么时候使用。 连字规则具有语言特定性。在 HTML 中，语言由lang 属性决定，浏览器只会在当前属性存在且有合适的连字字典可用的情况使用连字进行连接。在 XML 中，必须使用xml:lang属性。 注意:：在规范中，没有明确定义连字符的实现规则，所以具体的连字符在不同浏览器中可能有所区别。 初始值 ma...
CSS3干货24：hyphens 连字符实现英文断词换行
九天翔龙的技术博客
11-07 8034
hyphens 属性指定当文字跨越多行时如何自动换行断字，主要用于西方文字。 断开的单词增加连字符，并且换行。 hyphens 属性可以完全禁止连字符，在文本中手动指定点来使用连字符，或者让浏览器在适当的地方自动插入连字符。 hyphens：manual; / *手工设定。默认值，只有单词中有建议换行符才会换行，即手工在单词中插入 &shy; * / hyphens：none; / *无。即使单词中有换行符，也不会换行，只会在空白处换行* / hyphens：auto; / *自动。浏览
css单词太长时自动换行
最新发布
m0_61134931的博客
05-13 222
1.单词太长超出盒子自动换行。
CSS换行设置 white-space , word-break , overflow-wrap(原名word-wrap) , hyphens连字符 , text-overflow
kfepiza的博客
07-26 380
word-wrap属性原本属于微软的一个私有属性，在CSS3现在的文本规范草案中已经被重名为overflow-wrap。对于non-CJK(CJK指中文/日文/韩文)文本，可在任意字符间断行。word-wrap现在被当作overflow-wrap的“别名”。CJK文本不断行。Non-CJK文本表现同normal。...
CSS3之hyphens（连字符）
大白兔
08-03 8431
1，连字符 连字符分为硬连字符和软连字符： 硬连&amp;amp;hyphen;字符：，即使该单词没有中间换行，也会显示连字符 软连字符：&amp;amp;shy;，只有单词中间换行才显示连字符 2，hyphens属性 CSS3了提供hyphens属性指定文字多行自动换速行应断字既可以在中的相关资料：软使用连字符指定换速行点，也可以由浏览器在适当的位置插入换行符。 属性值： 可以加前缀-webkit-状...
CSS英文字符串换行（word-break: break-all 或者 word-wrap）
黄彪博客
01-28 2万+
文章参考 英文强制换行css 使用css强制英文单词断行代码 问题描述 在工作中，给表单的某个字段添加描述信息，于是，测试就输入了’dddddd…(500个)’，查看详情的时候，就出现了横向滚动条，这样就不能直观的显示，于是提了bug 解决过程 遇到不换行的问题，第一反应就是设置div的宽度，‘display: inline-block’，甚至尝试了 ‘float:left’，界面效果依然没有变化 请教了同事，说上面的例子是因为浏览器认为’dddddd…(500个)'是一个单词，默认是不会换行的，于
CSS实现强制换行、行省略、一行半
曲江涛的博客
05-15 6645
CSS，全称为层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。在本文中，我们将讨论如何使用 CSS 来实现强制换行、行省略和一行半的效果。
CSS文本属性的使用方法
09-25
在CSS（层叠样式表）中，文本属性用于控制网页中的文本样式，包括颜色、对齐方式、修饰、行高、字间距以及缩进等方面。这些属性使得设计师能够精细地调整文本的呈现效果，增强页面的可读性和美观性。 1. **文本颜色...
css文字控制与css文本样式示例和属性
12-13
本文将深入探讨CSS如何控制文字及文本样式，通过一系列属性来实现多样化的文本效果。 首先，CSS提供了一系列属性来控制文字的基本样式。例如： 1. `font-size`：此属性用于设置文本的字号，如`font-size: 18px;`，...
CSS3文字特效艺术文字样式特效代码
03-20
本篇文章将深入探讨如何利用CSS3来创建艺术性、动态且引人注目的文字特效，以及在实际项目中的应用。 首先，我们要明白CSS3引入了许多新的选择器、属性和值，这些为文字特效提供了无限可能。例如，`text-shadow`...
css3总结文档, 一些常用的写法
06-19
在本文中，我们将深入探讨一些CSS3中常用的技术和属性，帮助你更好地理解和应用它们。 首先，我们来看看单位。`em`是一个相对单位，它基于父元素的字体大小。而`rem`则更为特别，它相对于根元素（通常是`html`）的...
CSS常用属性大全
02-02
在CSS（层叠样式表）中，有许多属性用于控制网页元素的样式和布局。下面将详细解释标题和描述中提到的一些常用属性。 1. **字体属性**（`font`）： - `font-size`: 设置字体大小，可以使用单位如`px`（像素）、`em...
CSS几种 换行方式、文本超出隐藏 及 单词内的断行方式
weixin_44646763的博客
12-31 2062
CSS几种 换行方式、文本超出隐藏 及 单词内的断行方式
文本的换行与包裹 之 真的很少使用的 hyphens?
broken_promise的博客
10-06 689
再者, 连字符仅仅是一种渲染结果, 其不会影响文档真实的内容, 不会影响文本选择也不会影响搜索。可以完全不使用连字符, 可以让浏览器决定什么时候连字符, 可以也可以手动控制什么时候使用.处), 但是如果软换行处所在的单词会换行, 那么就会在软换行处换行并插入换行连字符(规范中并没有定义如何使用连字符, 因此具体的连字可能浏览器与浏览器不同。元素导致换行时, 不会添加连字符的. 从截图中可以看出, 如果是。处). 如果是软换行, 如果软换行处不会换行, 也不会插入连字符(告诉浏览器在换行时如何使用连字符.
CSS中最全的换行处理方式
热门推荐
苁蕶開始
05-31 3万+
在Web页面上常常可以看到某个元素内部有一个很长的单词，元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢？这取决于CSS，那么CSS如何控制布局，以及CSS如何让文本更合理的方式展示。比如下图的一种效果，在Web中是很常见的：由于URL文本过长，已经超出容器的宽度，影响了整个视觉效果，甚至很多时候还会影响Web页面的布局效果。最暴力的做法就是在容器上添加overflow...
css中英文单词换行的问题
my466879168的博客
07-25 8075
单词换行的问题 在项目中有时候会遇到英文很长的句子，然后当div剩下的部分不足以放下一个单词的时候，单词就会换行显示，这样的话尾部就会空了很大的地方显得很不好看 解决方法 可以通过两个css属性来实现这个需求： word-wrap:break-word; word-break:break-all; word-wrap word-wrap用来控制换行，有两种值： + normal + break-word(这个值用来强制换行的，内容将在边界内换行，在中文中是没有任何问题，英文语句也是没有任何问题，但是对于很
单词自动换行 css,CSS让英文单词的自动换行的方法介绍
weixin_34837898的博客
08-03 6375
CSS让英文单词的自动换行在制作网页过程中，css样式编写中，可能会遇到文字换行的问题，其中英文换行可能会困扰着很多初学者，而今天我就这个问题进行相应的阐述，学过css的朋友应该都知道，控制文字是否换行可以直接使用css中的word-break来进行调整，但是对于英文来说，我们要让其能满足所有浏览器的需要，仅仅这一个属性是不够的。根据我个人所了解的一些资料显示，英文过多，过长，不仅仅影响到表格，还...
添加css单词换行连字符
weixin_30239339的博客
10-09 1243
比较长的单词换行用属性hyphens:auto 兼容性：https://caniuse.com/#search=hyphens 两个注意要点： 1.html的lang="en-US" 2.需要设置css的word-break:break-all; <!DOCTYPE html> <html lang="en-US"> <head> <meta ch...
css怎么控制单词换行
04-28
可以使用CSS中的`word-wrap`或者`overflow-wrap`属性来控制单词换行。例如，将`word-wrap`设置为`break-word`可以让长单词在必要时换行，而将`overflow-wrap`设置为`break-word`可以让长单词在单词边界处换行。具体使用方法如下： ```css /* 使用 word-wrap 属性控制单词换行 */ div { word-wrap: break-word; } /* 使用 overflow-wrap 属性控制单词换行 */ div { overflow-wrap: break-word; } ``` 需要注意的是，`word-wrap`在CSS3中已经被废弃，推荐使用`overflow-wrap`来代替。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值