div自适应 文字自适应 站牌设计

div中 文字动态自适应
图片说明
1.绿色区域的大小是固定的
2.绿色区域中的站点数据不固定 有可能很多就会很宽。站点名称也不固定 数据就会很长。
需要实现的是:
1.站点数据要展示在绿色区域中。根据显示的数据条数和最长站点的名称来实现文字的自动适应。(填充整个绿色区域)
求大神指点思路!

2个回答

你这种要求单css搞不了。。需要用js来计算宽度。要不你绿色区域不要滚定,站点定宽,由站点数量来确定绿色区域的总体宽度

javaersummer
javaersummer 回复javaersummer: 现在实现的办法是:div总长度/字数最多的排 和 div宽度/共多少排 比较取最小的值 作为字体的大小和文字排的大小
接近 5 年之前 回复
javaersummer
javaersummer sorry,问题没有表示清楚,简单说就是div宽度固定,同时在宽度固定的div中展示任意多排文字(有间距),任意多排文字不能超过div的宽和高,要求文字尽量展现好看(像公交站牌)。
接近 5 年之前 回复

不知道你说的自适应是站点按照数量调整间距还是间距固定不变,样式需要调整长短?
1.调整间距,通过js来控制吧,间距=(总宽度 - 值)/(数量-1)
2.如果是间距不变的话,把带圈的样式设置为站点文字的背景就可以自动控制了

javaersummer
javaersummer 回复javaersummer: 现在实现的办法是:div总长度/字数最多的排 和 div宽度/共多少排 比较取最小的值 作为字体的大小和文字排的大小
接近 5 年之前 回复
javaersummer
javaersummer sorry,问题没有表示清楚,简单说就是div宽度固定,同时在宽度固定的div中展示任意多排文字(有间距),任意多排文字不能超过div的宽和高,要求文字尽量展现好看(像公交站牌)。
接近 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!